fix: 物联卡引导页菜单、按钮权限
This commit is contained in:
blp
parent
355bc6df64
commit
619d21f3f1
|
|
@ -70,6 +70,7 @@
|
|||
<Guide title="流量统计">
|
||||
<template #extra>
|
||||
<TimeSelect
|
||||
key="flow-static"
|
||||
:type="'week'"
|
||||
:quickBtnList="quickBtnList"
|
||||
@change="getEcharts"
|
||||
|
|
@ -93,6 +94,7 @@
|
|||
<Guide title="流量使用TOP10">
|
||||
<template #extra>
|
||||
<TimeSelect
|
||||
key="flow-top10"
|
||||
:quickBtn="false"
|
||||
:type="'week'"
|
||||
@change="getTopRang"
|
||||
|
|
|
|||
|
|
@ -1,85 +1,90 @@
|
|||
<!-- 物联卡-首页 -->
|
||||
<template>
|
||||
<page-container>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<div class="home-guide">
|
||||
<Guide title="物联卡引导"></Guide>
|
||||
<div
|
||||
class="home-guide-items"
|
||||
:style="`grid-template-columns: repeat(${
|
||||
guideList ? guideList.length : 1
|
||||
}, 1fr);`"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in guideList"
|
||||
:key="index"
|
||||
class="home-guide-item step-bar arrow-2 pointer"
|
||||
@click="jumpPage(item)"
|
||||
>
|
||||
<div class="item-english">{{ item.english }}</div>
|
||||
<div class="item-title">{{ item.name }}</div>
|
||||
<div class="item-index">
|
||||
<img :src="Image[index + 1]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<div class="home-statistics">
|
||||
<Guide title="基础统计">
|
||||
<template #extra>
|
||||
<span class="extra-text">详情</span>
|
||||
</template>
|
||||
</Guide>
|
||||
<div class="home-statistics-body">
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">昨日流量统计</div>
|
||||
<div class="item-title">{{ currentSource }} M</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="todayFlowChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">物联卡</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
v-for="iten in pieChartData"
|
||||
:key="iten.key"
|
||||
class="item-node"
|
||||
>
|
||||
<div class="item-node-text">
|
||||
{{ iten.value }}
|
||||
</div>
|
||||
<div :class="`state ${iten.className}`">
|
||||
{{ iten.name }}
|
||||
</div>
|
||||
<page-container>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<div class="home-guide">
|
||||
<Guide title="物联卡引导"></Guide>
|
||||
<div
|
||||
class="home-guide-items"
|
||||
:style="`grid-template-columns: repeat(${
|
||||
guideList ? guideList.length : 1
|
||||
}, 1fr);`"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in guideList"
|
||||
:key="index"
|
||||
class="home-guide-item step-bar arrow-2 pointer"
|
||||
@click="jumpPage(item)"
|
||||
>
|
||||
<div class="item-english">{{ item.english }}</div>
|
||||
<div class="item-title">{{ item.name }}</div>
|
||||
<div class="item-index">
|
||||
<img :src="Image[index + 1]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="iotCardChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24" style="min-height: 580px">
|
||||
<div class="home-body">
|
||||
<Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
|
||||
<div class="home-body-img">
|
||||
<img :src="getImage('/iot-card/iotcard-home.png')" />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</page-container>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<div class="home-statistics">
|
||||
<Guide title="基础统计">
|
||||
<template #extra>
|
||||
<span class="extra-text" @click="jumpDashboard"
|
||||
>详情</span
|
||||
>
|
||||
</template>
|
||||
</Guide>
|
||||
<div class="home-statistics-body">
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">昨日流量统计</div>
|
||||
<div class="item-title">{{ currentSource }} M</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="todayFlowChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">物联卡</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
v-for="iten in pieChartData"
|
||||
:key="iten.key"
|
||||
class="item-node"
|
||||
>
|
||||
<div class="item-node-text">
|
||||
{{ iten.value }}
|
||||
</div>
|
||||
<div :class="`state ${iten.className}`">
|
||||
{{ iten.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="iotCardChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24" style="min-height: 580px">
|
||||
<div class="home-body">
|
||||
<Guide
|
||||
title="平台架构图"
|
||||
english="PLATFORM ARCHITECTURE DIAGRAM"
|
||||
/>
|
||||
<div class="home-body-img">
|
||||
<img :src="getImage('/iot-card/iotcard-home.png')" />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -89,220 +94,245 @@ import { message } from 'ant-design-vue';
|
|||
import moment from 'moment';
|
||||
import { queryFlow, list } from '@/api/iot-card/home';
|
||||
import * as echarts from 'echarts';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
|
||||
interface GuideItemProps {
|
||||
key: string;
|
||||
name: string;
|
||||
english: string;
|
||||
url: string;
|
||||
param?: Record<string, any>;
|
||||
index?: number;
|
||||
auth: boolean;
|
||||
key: string;
|
||||
name: string;
|
||||
english: string;
|
||||
url: string;
|
||||
param?: Record<string, any>;
|
||||
index?: number;
|
||||
auth: boolean;
|
||||
}
|
||||
|
||||
const menuHasPermission = useMenuStore().hasPermission;
|
||||
const btnHasPermission = usePermissionStore().hasPermission;
|
||||
|
||||
// 菜单权限
|
||||
const dashBoardUrl = menuHasPermission('/iot-card/Dashboard');
|
||||
const platformUrl = menuHasPermission('/iot-card/Platform/Detail');
|
||||
const recordUrl = menuHasPermission('/iot-card/Record');
|
||||
const cardUrl = menuHasPermission('/iot-card/CardManagement');
|
||||
|
||||
// 按钮权限
|
||||
const paltformPermission = btnHasPermission(`/iot-card/Platform:add`);
|
||||
const cardPermission = btnHasPermission(`/iot-card/CardManagement:add`);
|
||||
|
||||
const Image = {
|
||||
1: getImage('/home/1.png'),
|
||||
2: getImage('/home/2.png'),
|
||||
3: getImage('/home/3.png'),
|
||||
1: getImage('/home/1.png'),
|
||||
2: getImage('/home/2.png'),
|
||||
3: getImage('/home/3.png'),
|
||||
};
|
||||
const guideList = [
|
||||
{
|
||||
key: 'EQUIPMENT',
|
||||
name: '平台对接',
|
||||
english: 'STEP1',
|
||||
auth: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
key: 'SCREEN',
|
||||
name: '物联卡管理',
|
||||
english: 'STEP2',
|
||||
auth: '',
|
||||
url: '',
|
||||
param: { save: true },
|
||||
},
|
||||
{
|
||||
key: 'CASCADE',
|
||||
name: '操作记录',
|
||||
english: 'STEP3',
|
||||
auth: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
key: 'EQUIPMENT',
|
||||
name: '平台对接',
|
||||
english: 'STEP1',
|
||||
auth: paltformPermission,
|
||||
url: platformUrl,
|
||||
},
|
||||
{
|
||||
key: 'SCREEN',
|
||||
name: '物联卡管理',
|
||||
english: 'STEP2',
|
||||
auth: !!cardPermission,
|
||||
url: cardUrl,
|
||||
param: { save: true },
|
||||
},
|
||||
{
|
||||
key: 'CASCADE',
|
||||
name: '操作记录',
|
||||
english: 'STEP3',
|
||||
auth: !!recordUrl,
|
||||
url: recordUrl,
|
||||
},
|
||||
];
|
||||
|
||||
const currentSource = ref<number>(0);
|
||||
const barChartData = ref<any[]>([]);
|
||||
const pieChartData = ref<any[]>([
|
||||
{
|
||||
key: 'using',
|
||||
name: '正常',
|
||||
value: 0,
|
||||
className: 'normal',
|
||||
},
|
||||
{
|
||||
key: 'toBeActivated',
|
||||
name: '未激活',
|
||||
value: 0,
|
||||
className: 'notActive',
|
||||
},
|
||||
{
|
||||
key: 'deactivate',
|
||||
name: '停用',
|
||||
value: 0,
|
||||
className: 'stopped',
|
||||
},
|
||||
{
|
||||
key: 'using',
|
||||
name: '正常',
|
||||
value: 0,
|
||||
className: 'normal',
|
||||
},
|
||||
{
|
||||
key: 'toBeActivated',
|
||||
name: '未激活',
|
||||
value: 0,
|
||||
className: 'notActive',
|
||||
},
|
||||
{
|
||||
key: 'deactivate',
|
||||
name: '停用',
|
||||
value: 0,
|
||||
className: 'stopped',
|
||||
},
|
||||
]);
|
||||
|
||||
const jumpPage = (data: GuideItemProps) => {
|
||||
if (data.url && data.auth) {
|
||||
router.push(`${data.url}`, data.param);
|
||||
} else {
|
||||
message.warning('暂无权限，请联系管理员');
|
||||
}
|
||||
if (data.url && data.auth) {
|
||||
router.push({ path: `${data.url}`, ...data.param });
|
||||
} else {
|
||||
message.warning('暂无权限，请联系管理员');
|
||||
}
|
||||
};
|
||||
|
||||
const jumpDashboard = () => {
|
||||
if (dashBoardUrl) {
|
||||
router.push(`${dashBoardUrl}`);
|
||||
} else {
|
||||
message.warning('暂无权限，请联系管理员');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取昨日流量消耗
|
||||
*/
|
||||
const getTodayFlow = async () => {
|
||||
const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
resp.result.map((item: any) => {
|
||||
currentSource.value += parseFloat(item.value.toFixed(2));
|
||||
});
|
||||
const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
resp.result.map((item: any) => {
|
||||
currentSource.value += parseFloat(item.value.toFixed(2));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取最近15天流量消耗统计图数据
|
||||
*/
|
||||
const get15DaysTrafficConsumption = async () => {
|
||||
const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
barChartData.value = resp.result
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
}))
|
||||
.reverse();
|
||||
createBarChart();
|
||||
const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
barChartData.value = resp.result
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
}))
|
||||
.reverse();
|
||||
createBarChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取物联卡状态数据
|
||||
*/
|
||||
const getStateCard = async () => {
|
||||
Promise.all(
|
||||
pieChartData.value.map((item) => {
|
||||
const params = {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'cardStateType',
|
||||
termType: 'eq',
|
||||
value: item.key,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
return list(params);
|
||||
}),
|
||||
)
|
||||
.then((resp) => {
|
||||
resp.forEach((i: any, index) => {
|
||||
if (i.success) {
|
||||
pieChartData.value[index].value = i.result.total;
|
||||
}
|
||||
});
|
||||
createPieChart();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
Promise.all(
|
||||
pieChartData.value.map((item) => {
|
||||
const params = {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'cardStateType',
|
||||
termType: 'eq',
|
||||
value: item.key,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
return list(params);
|
||||
}),
|
||||
)
|
||||
.then((resp) => {
|
||||
resp.forEach((i: any, index) => {
|
||||
if (i.success) {
|
||||
pieChartData.value[index].value = i.result.total;
|
||||
}
|
||||
});
|
||||
createPieChart();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 最近15天流量消耗统计图
|
||||
*/
|
||||
const createBarChart = () => {
|
||||
const myChart = echarts.init(proxy.$refs.todayFlowChart);
|
||||
const myChart = echarts.init(proxy.$refs.todayFlowChart);
|
||||
|
||||
const options = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false,
|
||||
data: barChartData.value.map((m) => m.date),
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'bar',
|
||||
color: '#FACD89',
|
||||
// barWidth: '5%', // 设单柱状置宽度
|
||||
showBackground: true, //设置柱状的背景虚拟
|
||||
data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
const options = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false,
|
||||
data: barChartData.value.map((m) => m.date),
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'bar',
|
||||
color: '#FACD89',
|
||||
// barWidth: '5%', // 设单柱状置宽度
|
||||
showBackground: true, //设置柱状的背景虚拟
|
||||
data: barChartData.value.map((m) =>
|
||||
parseFloat(m.value.toFixed(2)),
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 物联卡饼图
|
||||
*/
|
||||
const createPieChart = () => {
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.iotCardChart);
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.iotCardChart);
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)',
|
||||
},
|
||||
color: ['#85a5ff', '#f29b55', '#c4c4c4'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
avoidLabelOverlap: true, //是否启用防止标签重叠策略
|
||||
radius: ['50%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(255,255,255,1)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)',
|
||||
},
|
||||
},
|
||||
data: pieChartData.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
color: ['#85a5ff', '#f29b55', '#c4c4c4'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
avoidLabelOverlap: true, //是否启用防止标签重叠策略
|
||||
radius: ['50%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(255,255,255,1)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: pieChartData.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
barChartData.value,
|
||||
() => {
|
||||
createBarChart();
|
||||
},
|
||||
{ deep: true },
|
||||
barChartData.value,
|
||||
() => {
|
||||
createBarChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
getTodayFlow();
|
||||
|
|
@ -312,230 +342,230 @@ getStateCard();
|
|||
|
||||
<style scoped lang="less">
|
||||
.home-base {
|
||||
position: relative;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.home-guide {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
|
||||
.home-guide-items {
|
||||
display: grid;
|
||||
grid-column-gap: 56px;
|
||||
}
|
||||
.home-guide-items {
|
||||
display: grid;
|
||||
grid-column-gap: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.home-guide-item {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: linear-gradient(
|
||||
135.62deg,
|
||||
#f6f7fd 22.27%,
|
||||
rgba(255, 255, 255, 0.86) 91.82%
|
||||
);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 18px #efefef;
|
||||
.state {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 2px;
|
||||
content: '';
|
||||
padding: 16px;
|
||||
background: linear-gradient(
|
||||
135.62deg,
|
||||
#f6f7fd 22.27%,
|
||||
rgba(255, 255, 255, 0.86) 91.82%
|
||||
);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 18px #efefef;
|
||||
.state {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 2px;
|
||||
content: '';
|
||||
}
|
||||
&.normal::before {
|
||||
background: #85a5ff;
|
||||
}
|
||||
&.notActive::before {
|
||||
background: #f29b55;
|
||||
}
|
||||
&.stopped::before {
|
||||
background: #c4c4c4;
|
||||
}
|
||||
}
|
||||
&.normal::before {
|
||||
background: #85a5ff;
|
||||
|
||||
&.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.notActive::before {
|
||||
background: #f29b55;
|
||||
|
||||
.item-english {
|
||||
color: #4f4f4f;
|
||||
}
|
||||
&.stopped::before {
|
||||
background: #c4c4c4;
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
&.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-node {
|
||||
min-width: 58px;
|
||||
margin-right: 8px;
|
||||
z-index: 1;
|
||||
|
||||
.item-english {
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.item-node {
|
||||
min-width: 58px;
|
||||
margin-right: 8px;
|
||||
z-index: 1;
|
||||
|
||||
.item-node-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
.item-node-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 20px 0;
|
||||
color: @text-color;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item-index {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.item-index-echarts {
|
||||
.item-index;
|
||||
|
||||
right: 12px;
|
||||
bottom: 5%;
|
||||
z-index: 0;
|
||||
width: 50%;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.item-title {
|
||||
margin: 20px 0;
|
||||
color: @text-color;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item-index {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.item-index-echarts {
|
||||
.item-index;
|
||||
|
||||
right: 12px;
|
||||
bottom: 5%;
|
||||
z-index: 0;
|
||||
width: 50%;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-body {
|
||||
.home-base;
|
||||
.home-base;
|
||||
|
||||
min-height: 444px;
|
||||
margin-bottom: 24px;
|
||||
// padding-bottom: 26.5%;
|
||||
padding-bottom: 30%;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #2f54eb;
|
||||
min-height: 444px;
|
||||
margin-bottom: 24px;
|
||||
// padding-bottom: 26.5%;
|
||||
padding-bottom: 30%;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #2f54eb;
|
||||
|
||||
.home-body-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.home-body-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-statistics {
|
||||
.home-base;
|
||||
.home-base;
|
||||
|
||||
.extra-text {
|
||||
cursor: pointer;
|
||||
color: @primary-color;
|
||||
}
|
||||
.extra-text {
|
||||
cursor: pointer;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.home-statistics-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.home-statistics-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -60px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -60px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.home-step {
|
||||
.home-base;
|
||||
.home-base;
|
||||
|
||||
.home-step-items {
|
||||
display: grid;
|
||||
grid-column-gap: 66px;
|
||||
.home-step-items {
|
||||
display: grid;
|
||||
grid-column-gap: 66px;
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.step-item-title {
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-color: #f8f9fd;
|
||||
cursor: pointer;
|
||||
.step-item-title {
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-color: #f8f9fd;
|
||||
cursor: pointer;
|
||||
|
||||
.step-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
.step-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-content {
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
border-right: 1px solid #e5edf4;
|
||||
border-bottom: 1px solid #e5edf4;
|
||||
border-left: 1px solid #e5edf4;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-content {
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
border-right: 1px solid #e5edf4;
|
||||
border-bottom: 1px solid #e5edf4;
|
||||
border-left: 1px solid #e5edf4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-bar {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
&.arrow-1 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
&.arrow-1 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
|
||||
background: url('/images/home/arrow-1.png') no-repeat center;
|
||||
}
|
||||
background: url('/images/home/arrow-1.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.arrow-2 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
&.arrow-2 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
|
||||
background: url('/images/home/arrow-2.png') no-repeat center;
|
||||
}
|
||||
background: url('/images/home/arrow-2.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue