可视化、tableconfig对于按钮and逻辑没有处理
This commit is contained in:
parent
fc170fd97b
commit
0522a8f2bc
File diff suppressed because it is too large
Load Diff
630
src/layout/FullOther/HomeContent.js
Normal file
630
src/layout/FullOther/HomeContent.js
Normal file
@ -0,0 +1,630 @@
|
||||
// HomeContent.js
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Row, Col, Icon, Carousel } from 'antd';
|
||||
import styles from './../fullinter.less';
|
||||
import echarts from 'echarts';
|
||||
|
||||
class HomeContent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.carouselRef = React.createRef();
|
||||
this.echartsInstances = {
|
||||
riskLevel: null,
|
||||
safeCheckChart: null,
|
||||
dangerOperation: null,
|
||||
backLogChart: null,
|
||||
};
|
||||
this.chartResizeHandlers = {};
|
||||
this.isUnmounted = false;
|
||||
}
|
||||
|
||||
waitForElement = (elementId, maxRetries = 10) => {
|
||||
return new Promise((resolve) => {
|
||||
let retries = 0;
|
||||
const checkInterval = setInterval(() => {
|
||||
const element = document.getElementById(elementId);
|
||||
if (element || retries >= maxRetries) {
|
||||
clearInterval(checkInterval);
|
||||
resolve(!!element);
|
||||
}
|
||||
retries++;
|
||||
}, 50);
|
||||
});
|
||||
};
|
||||
|
||||
riskLevel = async () => {
|
||||
if (this.isUnmounted) return;
|
||||
const elementExists = await this.waitForElement('riskLevelFull');
|
||||
if (!elementExists || this.isUnmounted) return;
|
||||
|
||||
if (this.echartsInstances.riskLevel) {
|
||||
this.echartsInstances.riskLevel.dispose();
|
||||
this.echartsInstances.riskLevel = null;
|
||||
}
|
||||
|
||||
const riskLevels = document.getElementById('riskLevelFull');
|
||||
if (!riskLevels) return;
|
||||
|
||||
this.echartsInstances.riskLevel = echarts.init(riskLevels);
|
||||
const data = this.props.riskTypeRate || [];
|
||||
|
||||
const option = {
|
||||
color: ['#c92a2a', '#ffa94d', '#ffe066', '#4285F4'],
|
||||
title: [
|
||||
{
|
||||
text: '风险分级占比',
|
||||
x: 'center',
|
||||
y: '5%',
|
||||
textStyle: { fontSize: 16, color: '#000' },
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
const color = params.color;
|
||||
return `<div style="display: flex; align-items: center;">
|
||||
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: ${color}; margin-right: 8px;"></span>
|
||||
<span>${params.name}:</span>
|
||||
<span style="font-weight: bold; margin-left: 8px; font-size: 16px;">${params.value}</span>
|
||||
</div>`;
|
||||
},
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||
borderColor: '#FFFFFF',
|
||||
borderWidth: 2,
|
||||
textStyle: { color: '#000', fontSize: 14 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
minAngle: 20,
|
||||
radius: ['55%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
clockwise: true,
|
||||
avoidLabelOverlap: true,
|
||||
hoverOffset: 15,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{a|{b}：{c}}{e|({d}%)}\n',
|
||||
color: '#000',
|
||||
textBorderWidth: 0,
|
||||
rich: {
|
||||
a: { padding: [-15, 0, 0, 0], fontSize: 15, color: '#000', textBorderWidth: 0 },
|
||||
e: { fontSize: 14, color: '#000', padding: [-15, 0, 0, 5], textBorderWidth: 0 },
|
||||
},
|
||||
},
|
||||
labelLine: { normal: { show: false } },
|
||||
data: data.map((item) => ({ name: item.riskType, value: item.count })),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.echartsInstances.riskLevel.setOption(option);
|
||||
|
||||
const resizeHandler = () => {
|
||||
if (this.echartsInstances.riskLevel && !this.isUnmounted) {
|
||||
this.echartsInstances.riskLevel.resize();
|
||||
}
|
||||
};
|
||||
this.chartResizeHandlers.riskLevel = resizeHandler;
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
};
|
||||
|
||||
transformDat = (originalData, barTopColor, num) => {
|
||||
if (!originalData || !Array.isArray(originalData) || originalData.length === 0) {
|
||||
return { companyNames: [], series: [], legendData: [] };
|
||||
}
|
||||
|
||||
let allTypes = [];
|
||||
if (num == 1) {
|
||||
allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.jobName)))];
|
||||
} else {
|
||||
allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.name)))];
|
||||
}
|
||||
|
||||
allTypes = allTypes.filter(Boolean);
|
||||
const companyNames = originalData?.map((item) => item.company);
|
||||
const series = allTypes?.map((typeName, index) => ({
|
||||
name: typeName,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (num == 1) {
|
||||
return barTopColor[index];
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: barTopColor[index][0] },
|
||||
{ offset: 1, color: barTopColor[index][1] },
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: originalData?.map((company) => {
|
||||
const detail = company.details?.find((d) => (num == 1 ? d.jobName : d.name) === typeName);
|
||||
return detail ? detail.qty : 0;
|
||||
}),
|
||||
}));
|
||||
|
||||
return { companyNames, series, legendData: allTypes };
|
||||
};
|
||||
|
||||
safeCheckChart = async () => {
|
||||
if (this.isUnmounted) return;
|
||||
const elementExists = await this.waitForElement('safeCheckChart');
|
||||
if (!elementExists || this.isUnmounted) return;
|
||||
|
||||
if (this.echartsInstances.safeCheckChart) {
|
||||
this.echartsInstances.safeCheckChart.dispose();
|
||||
this.echartsInstances.safeCheckChart = null;
|
||||
}
|
||||
|
||||
let safeCheckCharts = document.getElementById('safeCheckChart');
|
||||
if (!safeCheckCharts) return;
|
||||
|
||||
const barTopColor = ['#02c3f1', '#53e568', '#a154e9'];
|
||||
const jobData = this.props.jobTodayTop3 || [];
|
||||
|
||||
if (jobData.length === 0) return;
|
||||
|
||||
this.echartsInstances.safeCheckChart = echarts.init(safeCheckCharts);
|
||||
let xdata = this.transformDat(jobData, barTopColor, 1);
|
||||
|
||||
this.echartsInstances.safeCheckChart.setOption({
|
||||
title: {
|
||||
text: '当日工作票排名前三家的数据',
|
||||
textStyle: { fontSize: 16, color: '#fff' },
|
||||
},
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
legend: {
|
||||
data: xdata.legendData,
|
||||
align: 'right',
|
||||
right: 10,
|
||||
itemGap: 16,
|
||||
itemWidth: 18,
|
||||
itemHeight: 10,
|
||||
textStyle: { color: '#fff', fontSize: 14 },
|
||||
},
|
||||
color: barTopColor,
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xdata.companyNames,
|
||||
axisLine: { lineStyle: { color: '#3eb2e8' } },
|
||||
axisLabel: { textStyle: { color: '#fff' } },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { textStyle: { color: '#fff' } },
|
||||
splitLine: { lineStyle: { color: '#4784e8' } },
|
||||
},
|
||||
],
|
||||
series: xdata.series,
|
||||
});
|
||||
|
||||
const resizeHandler = () => {
|
||||
if (this.echartsInstances.safeCheckChart && !this.isUnmounted) {
|
||||
this.echartsInstances.safeCheckChart.resize();
|
||||
}
|
||||
};
|
||||
this.chartResizeHandlers.safeCheckChart = resizeHandler;
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
};
|
||||
|
||||
dangerOperation = async () => {
|
||||
if (this.isUnmounted) return;
|
||||
const elementExists = await this.waitForElement('dangerOperationChart');
|
||||
if (!elementExists || this.isUnmounted) return;
|
||||
|
||||
if (this.echartsInstances.dangerOperation) {
|
||||
this.echartsInstances.dangerOperation.dispose();
|
||||
this.echartsInstances.dangerOperation = null;
|
||||
}
|
||||
|
||||
const dangerOperationCharts = document.getElementById('dangerOperationChart');
|
||||
if (!dangerOperationCharts) return;
|
||||
|
||||
const linkData = this.props.linkSum || [];
|
||||
if (linkData.length === 0) return;
|
||||
|
||||
this.echartsInstances.dangerOperation = echarts.init(dangerOperationCharts);
|
||||
const xAxisData = linkData.map((item) => item.name);
|
||||
const seriesData = linkData.map((item) => item.qty);
|
||||
|
||||
const option = {
|
||||
color: ['#4285F4'],
|
||||
title: [
|
||||
{
|
||||
text: '当日工作票的统计数量',
|
||||
x: 'center',
|
||||
y: '5%',
|
||||
textStyle: { fontSize: 16, color: '#000' },
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
formatter: function (params) {
|
||||
const color = params[0].color;
|
||||
return `<div style="display: flex; align-items: center;">
|
||||
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${color}; margin-right: 8px;"></span>
|
||||
<span>${params[0].name}:</span>
|
||||
<span style="font-weight: bold; margin-left: 8px; font-size: 16px;">${params[0].value}</span>
|
||||
</div>`;
|
||||
},
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||
borderColor: '#FFFFFF',
|
||||
borderWidth: 2,
|
||||
textStyle: { color: '#000', fontSize: 14 },
|
||||
},
|
||||
grid: { left: '10%', right: '5%', top: '15%', bottom: '10%', containLabel: true },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: { lineStyle: { color: '#000' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { textStyle: { color: '#000' }, rotate: 30, interval: 0 },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
nameTextStyle: { color: '#000' },
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { textStyle: { color: '#000' } },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '危险作业数量',
|
||||
type: 'bar',
|
||||
data: seriesData,
|
||||
itemStyle: {
|
||||
normal: { color: '#4285F4', borderRadius: 12 },
|
||||
emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
|
||||
},
|
||||
label: { show: true, position: 'top', textStyle: { color: '#000', fontSize: 12 }, formatter: '{c}' },
|
||||
barWidth: '60%',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.echartsInstances.dangerOperation.setOption(option);
|
||||
|
||||
const resizeHandler = () => {
|
||||
if (this.echartsInstances.dangerOperation && !this.isUnmounted) {
|
||||
this.echartsInstances.dangerOperation.resize();
|
||||
}
|
||||
};
|
||||
this.chartResizeHandlers.dangerOperation = resizeHandler;
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
};
|
||||
|
||||
backLog = async () => {
|
||||
if (this.isUnmounted) return;
|
||||
const elementExists = await this.waitForElement('backLogChart');
|
||||
if (!elementExists || this.isUnmounted) return;
|
||||
|
||||
if (this.echartsInstances.backLogChart) {
|
||||
this.echartsInstances.backLogChart.dispose();
|
||||
this.echartsInstances.backLogChart = null;
|
||||
}
|
||||
|
||||
let backLogCharts = document.getElementById('backLogChart');
|
||||
if (!backLogCharts) return;
|
||||
|
||||
const taskData = this.props.taskTop3 || [];
|
||||
if (taskData.length === 0) return;
|
||||
|
||||
const barTopColor = [
|
||||
['#75baf3', '#2177d5'],
|
||||
['#ffa94d', '#f76707'],
|
||||
['#99ca6e', '#48a447'],
|
||||
];
|
||||
|
||||
this.echartsInstances.backLogChart = echarts.init(backLogCharts);
|
||||
let xdata = this.transformDat(taskData, barTopColor, 2);
|
||||
const legendColors = barTopColor.map((gradient) => gradient[0]);
|
||||
|
||||
this.echartsInstances.backLogChart.setOption({
|
||||
title: {
|
||||
text: '各事项排名前三名统计',
|
||||
x: 'center',
|
||||
y: '5%',
|
||||
textStyle: { fontSize: 16, color: '#000' },
|
||||
},
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
legend: {
|
||||
data: xdata.legendData.map((name, index) => ({
|
||||
name: name,
|
||||
itemStyle: { color: legendColors[index], borderWidth: 0 },
|
||||
textStyle: { color: '#000', fontSize: 14 },
|
||||
})),
|
||||
align: 'right',
|
||||
top: 10,
|
||||
right: 10,
|
||||
itemGap: 16,
|
||||
itemWidth: 18,
|
||||
itemHeight: 12,
|
||||
},
|
||||
color: legendColors,
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xdata.companyNames,
|
||||
axisLine: { lineStyle: { color: '#3eb2e8' } },
|
||||
axisLabel: { textStyle: { color: '#000' } },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { textStyle: { color: '#000' } },
|
||||
splitLine: { lineStyle: { color: '#4784e8' } },
|
||||
},
|
||||
],
|
||||
series: xdata.series,
|
||||
});
|
||||
|
||||
const resizeHandler = () => {
|
||||
if (this.echartsInstances.backLogChart && !this.isUnmounted) {
|
||||
this.echartsInstances.backLogChart.resize();
|
||||
}
|
||||
};
|
||||
this.chartResizeHandlers.backLogChart = resizeHandler;
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
};
|
||||
|
||||
initAllCharts = () => {
|
||||
if (this.isUnmounted) return;
|
||||
setTimeout(() => {
|
||||
if (this.isUnmounted) return;
|
||||
this.riskLevel();
|
||||
this.safeCheckChart();
|
||||
this.dangerOperation();
|
||||
this.backLog();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
disposeAllCharts = () => {
|
||||
Object.keys(this.echartsInstances).forEach((key) => {
|
||||
if (this.echartsInstances[key]) {
|
||||
try {
|
||||
this.echartsInstances[key].dispose();
|
||||
} catch (e) {
|
||||
console.warn(`Dispose chart ${key} error:`, e);
|
||||
}
|
||||
this.echartsInstances[key] = null;
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(this.chartResizeHandlers).forEach((key) => {
|
||||
if (this.chartResizeHandlers[key]) {
|
||||
window.removeEventListener('resize', this.chartResizeHandlers[key]);
|
||||
}
|
||||
});
|
||||
this.chartResizeHandlers = {};
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
if (this.carouselRef.current) {
|
||||
this.carouselRef.current.prev();
|
||||
}
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
if (this.carouselRef.current) {
|
||||
this.carouselRef.current.next();
|
||||
}
|
||||
};
|
||||
|
||||
handleCarouselChange = (current) => {
|
||||
this.props.onCarouselChange?.(current);
|
||||
};
|
||||
|
||||
handleDotClick = (index) => {
|
||||
this.props.onDotClick?.(index);
|
||||
if (this.carouselRef.current) {
|
||||
this.carouselRef.current.goTo(index);
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.isUnmounted = false;
|
||||
this.initAllCharts();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
prevProps.riskTypeRate !== this.props.riskTypeRate ||
|
||||
prevProps.jobTodayTop3 !== this.props.jobTodayTop3 ||
|
||||
prevProps.linkSum !== this.props.linkSum ||
|
||||
prevProps.taskTop3 !== this.props.taskTop3
|
||||
) {
|
||||
this.disposeAllCharts();
|
||||
this.initAllCharts();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.isUnmounted = true;
|
||||
this.disposeAllCharts();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
riskTypeRate = [],
|
||||
riskTotal = [],
|
||||
mediaList = [],
|
||||
announcementList = [],
|
||||
currentMediaIndex = 0,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className={styles.homeContentWrapper}>
|
||||
<Row className={styles.homeContentRow} gutter={0}>
|
||||
{/* 左侧区域 */}
|
||||
<Col span={7} className={styles.leftCol}>
|
||||
<div className={styles.riskCard}>
|
||||
<Row className={styles.riskRow}>
|
||||
<Col span={8} className={styles.riskStatsCol}>
|
||||
{riskTypeRate.map((item, index) => (
|
||||
<div key={index} className={`${styles.riskStatItem} ${styles['riskLevel' + item.riskType]}`}>
|
||||
<div className={styles.riskStatName}>{item.riskType}</div>
|
||||
<div className={styles.riskStatValue}>{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</Col>
|
||||
<Col span={16} className={styles.chartCol}>
|
||||
<div id="riskLevelFull" className={styles.chartContainer}></div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div className={styles.spacer}></div>
|
||||
|
||||
<div className={styles.hiddenCard}>
|
||||
<Row className={styles.riskRow}>
|
||||
<Col span={8} className={styles.hiddenStatsCol}>
|
||||
<div className={styles.hiddenTitle}>年度隐患数据</div>
|
||||
{riskTotal.map((item, index) => (
|
||||
<div key={index} className={styles.hiddenStatItem}>
|
||||
<div className={styles.hiddenStatName}>{item.name}</div>
|
||||
<div className={styles.hiddenStatValue}>{item.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</Col>
|
||||
<Col span={16} className={styles.chartCol}>
|
||||
<div id="safeCheckChart" className={styles.chartContainer}></div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
{/* 中间区域 */}
|
||||
<Col span={10} className={styles.middleCol}>
|
||||
<div className={styles.sloganCard}>
|
||||
<div className={styles.sloganText}>安全方针：以人为本、关注健康、依法治企、安全发展。</div>
|
||||
<div className={styles.sloganSubText}>安全理念：一切风险皆可控，一切事故皆可防！</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.carouselCard}>
|
||||
<div className={styles.carouselWrapper}>
|
||||
<Carousel
|
||||
ref={this.carouselRef}
|
||||
autoplay
|
||||
autoplaySpeed={5000}
|
||||
effect="fade"
|
||||
dots={false}
|
||||
pauseOnHover={true}
|
||||
afterChange={this.handleCarouselChange}
|
||||
className={styles.carousel}
|
||||
>
|
||||
{mediaList.map((item, index) => (
|
||||
<div key={index} className={styles.carouselItem}>
|
||||
{item.type === 'video' ? (
|
||||
<video src={item.url} className={styles.mediaVideo} autoPlay muted loop playsInline />
|
||||
) : (
|
||||
<img src={item.url} alt={`轮播图 ${index + 1}`} className={styles.mediaImage} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
<div className={styles.customArrowLeft} onClick={this.handlePrev}>
|
||||
<Icon type="left" style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.5)' }} />
|
||||
</div>
|
||||
<div className={styles.customArrowRight} onClick={this.handleNext}>
|
||||
<Icon type="right" style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.5)' }} />
|
||||
</div>
|
||||
<div className={styles.customDots}>
|
||||
{mediaList.map((_, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`${styles.dot} ${currentMediaIndex === index ? styles.activeDot : ''}`}
|
||||
onClick={() => this.handleDotClick(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.announcementCard}>
|
||||
<div className={styles.announcementHeader}>
|
||||
<div className={styles.announcementTitle}>
|
||||
<Icon type="sound" className={styles.announcementIcon} />
|
||||
<span>公司公告</span>
|
||||
</div>
|
||||
<span className={styles.announcementCount}>共 {announcementList.length} 条公告</span>
|
||||
</div>
|
||||
<div className={styles.announcementList}>
|
||||
{announcementList.length > 0 ? (
|
||||
<ul className={styles.announcementUl}>
|
||||
{announcementList.map((item, index) => (
|
||||
<li
|
||||
key={item.id || index}
|
||||
className={styles.announcementItem}
|
||||
onClick={() => item.url && window.open(item.url)}
|
||||
>
|
||||
<span className={styles.announcementItemTitle} title={item.title}>
|
||||
{item.title}
|
||||
</span>
|
||||
<span className={styles.announcementItemTime}>
|
||||
{item.publishTime || item.createTime || item.date}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className={styles.emptyAnnouncement}>
|
||||
<Icon type="inbox" className={styles.emptyIcon} />
|
||||
<span>暂无公告</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
{/* 右侧区域 */}
|
||||
<Col span={7} className={styles.rightCol}>
|
||||
<div className={styles.riskCard}>
|
||||
<Row className={styles.riskRow}>
|
||||
<Col span={8} className={styles.trainingStatsCol}>
|
||||
<div className={styles.trainingTitle}>年度培训数据</div>
|
||||
{riskTotal.map((item, index) => (
|
||||
<div key={index} className={styles.trainingStatItem}>
|
||||
<div className={styles.trainingStatName}>{item.name}</div>
|
||||
<div className={styles.trainingStatValue}>{item.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</Col>
|
||||
<Col span={16} className={styles.chartCol}>
|
||||
<div id="backLogChart" className={styles.chartContainer}></div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div className={styles.spacer}></div>
|
||||
|
||||
<div className={styles.dangerCard}>
|
||||
<div id="dangerOperationChart" className={styles.fullChartContainer}></div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HomeContent;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,4 @@
|
||||
// fullinter.less - 修复后的完整样式
|
||||
@font-face {
|
||||
font-family: pangmenzhengdao;
|
||||
src: url('../assets/fonts/pangmenzhengdao.ttf');
|
||||
@ -16,6 +17,7 @@
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// 主容器
|
||||
.box {
|
||||
transform-origin: 0 0;
|
||||
position: absolute;
|
||||
@ -25,76 +27,72 @@
|
||||
}
|
||||
|
||||
.blackBack {
|
||||
background-image: url('../assets/login/bg.png');
|
||||
width: 100%;
|
||||
// height: calc(100% - 10px); // 进入全屏
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.backImage {
|
||||
background-color: #021428; //021428
|
||||
background-color: #f2f5f9;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 头部
|
||||
.header {
|
||||
// background-image: url('../assets/layout/full-header.png');
|
||||
// background-size: cover;
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 10px;
|
||||
background-color: rgba(73, 122, 175, 0.3);
|
||||
background-color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.headerText {
|
||||
color: GoldenRod;
|
||||
color: #000;
|
||||
font-size: 32px;
|
||||
white-space: nowrap;
|
||||
// font-weight: bold;
|
||||
// margin-top: 10px;
|
||||
font-family: 'pangmenzhengdao';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.configBanners {
|
||||
// height: 100%;
|
||||
width: 110px;
|
||||
height: 48px;
|
||||
font-size: 20px; // 适当减小字体大小
|
||||
font-size: 20px;
|
||||
margin: 0px 10px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border: 1px solid transparent; // 默认透明边框
|
||||
// border: 1px solid #00caf7;
|
||||
color: #000;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(to bottom, #01408e, #07295e);
|
||||
display: flex; // 使用flex布局
|
||||
align-items: center; // 垂直居中
|
||||
justify-content: center; // 水平居中
|
||||
text-align: center; // 文字居中
|
||||
box-sizing: border-box; // 确保边框计算在内
|
||||
padding: 0 2px; // 如果需要可以添加内边距
|
||||
overflow: hidden; // 防止内容溢出
|
||||
text-overflow: ellipsis; // 文字过长显示省略号
|
||||
position: relative;
|
||||
background: #e3f2e9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #00caf7; // 悬停效果
|
||||
border-color: #00caf7;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #00caf7 !important;
|
||||
background: linear-gradient(to bottom, #0150a0, #083070); // 激活时背景加深
|
||||
box-shadow: 0 0 10px rgba(0, 202, 247, 0.5); // 可选：添加发光效果
|
||||
background: linear-gradient(to bottom, #01408e, #07295e);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -116,6 +114,7 @@
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
||||
@ -127,18 +126,10 @@
|
||||
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
||||
}
|
||||
}
|
||||
.boxBack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
// 其他tab内容
|
||||
.otherTabContent {
|
||||
flex: 1; // 占据剩余空间
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -147,405 +138,455 @@
|
||||
margin: 0px 10px 10px 10px;
|
||||
border: 1px solid rgba(0, 202, 247, 0.3);
|
||||
}
|
||||
.row {
|
||||
// height: calc(65% - 200px);
|
||||
|
||||
// ========== HomeContent 组件样式 ==========
|
||||
.homeContentWrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rowTwo {
|
||||
height: 30%;
|
||||
|
||||
.homeContentRow {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 左右列通用样式
|
||||
.leftCol,
|
||||
.rightCol,
|
||||
.middleCol {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 左侧和右侧卡片样式
|
||||
.riskCard {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hiddenCard {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
min-height: 0;
|
||||
}
|
||||
.boxleft {
|
||||
|
||||
.dangerCard {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.riskRow {
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.riskStatsCol,
|
||||
.hiddenStatsCol,
|
||||
.trainingStatsCol {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.chartCol {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.fullChartContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
// 风险等级统计项
|
||||
.riskStatItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.fullBorderBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px; // 如果需要内边距
|
||||
box-sizing: border-box; // 确保内边距计算在内
|
||||
}
|
||||
.risklevel {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.risklevelOne {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.risklevelTwo {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
.riskChange {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.riskChangeTwo {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
padding: 26px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.gradient {
|
||||
background-image: linear-gradient(
|
||||
250deg,
|
||||
rgba(47, 109, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 54) 50%,
|
||||
rgba(47, 109, 255, 1) 100%
|
||||
);
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px;
|
||||
// margin: 10px;
|
||||
}
|
||||
.gradientTwo {
|
||||
background-image: linear-gradient(
|
||||
250deg,
|
||||
rgba(47, 109, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 54) 50%,
|
||||
rgba(47, 109, 255, 1) 100%
|
||||
);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 2px;
|
||||
}
|
||||
.gradientThree {
|
||||
background-image: linear-gradient(
|
||||
275deg,
|
||||
rgba(47, 109, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 54) 50%,
|
||||
rgba(47, 109, 255, 1) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 2px;
|
||||
}
|
||||
.gradientNext {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #021428;
|
||||
// z-index: 999;
|
||||
}
|
||||
.gradientNextTwo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(47, 109, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
.gradientText {
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: #49ebff;
|
||||
font-style: italic;
|
||||
font-family: '站酷庆科黄油体';
|
||||
}
|
||||
.gradientName {
|
||||
font-size: 12px;
|
||||
}
|
||||
.gradientTextTwo {
|
||||
font-size: 86px;
|
||||
font-weight: bold;
|
||||
// color: #ef595a;
|
||||
color: #12f714;
|
||||
}
|
||||
.gradientNameTwo {
|
||||
font-size: 28px;
|
||||
}
|
||||
.title {
|
||||
background-image: url('../assets/layout/title.png');
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
width: 90%;
|
||||
height: 25px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
.circle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #021428;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.titlename {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: '站酷庆科黄油体';
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
// .risklevelOne {
|
||||
// height: 60%;
|
||||
// width: 90%;
|
||||
// }
|
||||
.boxTwo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
}
|
||||
.capsuleChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
.scrollboard {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0px 20px 20px 20px;
|
||||
margin: 10px 20px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
.scrollboard :global(.header) {
|
||||
height: auto;
|
||||
|
||||
.riskStatName {
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.riskStatValue {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
// 风险等级背景色
|
||||
.riskLevel重大风险 {
|
||||
background-color: #c92a2a;
|
||||
}
|
||||
.riskLevel较大风险 {
|
||||
background-color: #ffa94d;
|
||||
}
|
||||
.riskLevel一般风险 {
|
||||
background-color: #ffe066;
|
||||
}
|
||||
.riskLevel低风险 {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
// 隐患统计样式
|
||||
.hiddenTitle {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hiddenStatItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #1e2a3a;
|
||||
margin: 10px 20px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hiddenStatName {
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hiddenStatValue {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
// 培训统计样式
|
||||
.trainingTitle {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.trainingStatItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #1e2a3a;
|
||||
margin: 10px 20px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trainingStatName {
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.trainingStatValue {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
// 中间区域样式
|
||||
.middleCol {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.sloganCard {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sloganText {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sloganSubText {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.carouselCard {
|
||||
flex: 4;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.carouselWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carouselItem {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mediaVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mediaImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.announcementCard {
|
||||
flex: 3;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.announcementHeader {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 2px solid #1890ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.announcementTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.announcementIcon {
|
||||
font-size: 20px;
|
||||
color: #1890ff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.announcementTitle span {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.announcementCount {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.announcementList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.announcementUl {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.scrollboard :global(.dv-scroll-board .rows .ceil) {
|
||||
text-align: center;
|
||||
}
|
||||
.scrollboard :global(.dv-scroll-board .header .header-item) {
|
||||
text-align: center;
|
||||
|
||||
.announcementItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.scoreBox {
|
||||
// background-image: url("../assets/layout/score-box.png");
|
||||
// background-size: cover;
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
.announcementItemTitle {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.scoreBox1 {
|
||||
background-image: url('../assets/layout/score-box.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
// height: 140px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20px;
|
||||
padding: 5px;
|
||||
|
||||
.announcementItemTime {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.score {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
background-image: url('../assets/layout/ks.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
object-fit: cover;
|
||||
// width: 230px;
|
||||
width: 33%;
|
||||
height: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
.score2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
background-image: url('../assets/layout/xk.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
object-fit: cover;
|
||||
width: 33%;
|
||||
height: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
.score3 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
background-image: url('../assets/layout/wk.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
object-fit: cover;
|
||||
width: 33%;
|
||||
height: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
.score4 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-image: url('../assets/layout/score.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 30%;
|
||||
padding: 0px 15px;
|
||||
// height: 100%;
|
||||
// margin: 10px;
|
||||
}
|
||||
.scoreRight {
|
||||
|
||||
.emptyAnnouncement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.scoreLeft {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #6cc8d9;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.scoreText {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #6cc8d9;
|
||||
}
|
||||
.scoreText2 {
|
||||
font-size: 33px;
|
||||
color: #7fffff;
|
||||
font-weight: bold;
|
||||
// font-style: oblique;
|
||||
}
|
||||
.scoreText3 {
|
||||
font-size: 12px;
|
||||
color: #6cc8d9;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ulData {
|
||||
li {
|
||||
// transform: rotate(45deg);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
// margin-left: -20px;
|
||||
// margin-right: -20px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
li:nth-of-type(1) {
|
||||
// transform: rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(12deg) translate(-280px) rotate(-12deg);
|
||||
// transform-origin: 20px 220px;
|
||||
}
|
||||
li:nth-of-type(2) {
|
||||
transform: translate(-50%, -50%) rotate(38deg) translate(-280px) rotate(-38deg);
|
||||
}
|
||||
li:nth-of-type(3) {
|
||||
transform: translate(-50%, -50%) rotate(64deg) translate(-280px) rotate(-64deg);
|
||||
}
|
||||
li:nth-of-type(4) {
|
||||
transform: translate(-50%, -50%) rotate(90deg) translate(-280px) rotate(-90deg);
|
||||
}
|
||||
li:nth-of-type(5) {
|
||||
transform: translate(-50%, -50%) rotate(116deg) translate(-280px) rotate(-116deg);
|
||||
}
|
||||
li:nth-of-type(6) {
|
||||
transform: translate(-50%, -50%) rotate(142deg) translate(-280px) rotate(-142deg);
|
||||
}
|
||||
li:nth-of-type(7) {
|
||||
transform: translate(-50%, -50%) rotate(168deg) translate(-280px) rotate(-168deg);
|
||||
}
|
||||
li:nth-of-type(8) {
|
||||
transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) rotate(12deg);
|
||||
}
|
||||
li:nth-of-type(9) {
|
||||
transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) rotate(38deg);
|
||||
}
|
||||
li:nth-of-type(10) {
|
||||
transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) rotate(64deg);
|
||||
}
|
||||
li:nth-of-type(11) {
|
||||
transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) rotate(116deg);
|
||||
}
|
||||
|
||||
li:nth-of-type(12) {
|
||||
transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) rotate(142deg);
|
||||
}
|
||||
li:nth-of-type(13) {
|
||||
transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) rotate(168deg);
|
||||
}
|
||||
height: 100%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.roateData {
|
||||
background-image: linear-gradient(
|
||||
275deg,
|
||||
rgba(47, 109, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 54) 50%,
|
||||
rgba(47, 109, 255, 1) 100%
|
||||
);
|
||||
.emptyIcon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// 轮播图控件
|
||||
.customArrowLeft,
|
||||
.customArrowRight {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 2px;
|
||||
// background-color: rgba(47, 109, 255, 0.1);
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
}
|
||||
.roatBack {
|
||||
background-color: #021428;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
|
||||
.customArrowLeft {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.customArrowRight {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.customDots {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
width: 24px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
// 全局 Carousel 样式
|
||||
:global {
|
||||
.ant-carousel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.slick-slider {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.slick-list {
|
||||
height: 100%;
|
||||
}
|
||||
.slick-track {
|
||||
height: 100%;
|
||||
}
|
||||
.slick-slider > div,
|
||||
.slick-list > div,
|
||||
.slick-track > div,
|
||||
.slick-slide > div {
|
||||
height: 100%;
|
||||
}
|
||||
.slick-slide,
|
||||
.slick-slide > div {
|
||||
height: 100%;
|
||||
}
|
||||
.slick-slider div,
|
||||
.slick-list div,
|
||||
.slick-track div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user