update code
parent
1723b7d0ac
commit
05c15aeb9a
|
|
@ -199,6 +199,7 @@ body {
|
|||
}
|
||||
.screen-module.no-title .module-ctx {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.screen-module.no-border {
|
||||
background-image: none;
|
||||
|
|
|
|||
|
|
@ -213,6 +213,7 @@ body{
|
|||
}
|
||||
.module-ctx{
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.no-border{
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7027"><path d="M519.723387 534.475706a19.438636 19.438636 0 0 0-19.438636 19.438636v450.559809a19.438636 19.438636 0 0 0 5.640675 13.79796 19.178297 19.178297 0 0 0 13.797961 5.727455h133.640621a19.525415 19.525415 0 0 0 13.79796-5.727455 19.091517 19.091517 0 0 0 5.640676-13.79796V553.827562a19.438636 19.438636 0 0 0-19.438636-19.438636h-34.104392V232.482613H798.37276v64.477261a19.351856 19.351856 0 0 0 29.244733 16.835247l164.187049-95.457586a19.525415 19.525415 0 0 0 0-33.757274l-164.187049-95.457587-3.210846-1.735592a18.39728 18.39728 0 0 0-6.508472-1.214915A19.525415 19.525415 0 0 0 798.37276 105.697582V173.559248H393.719372L99.710005 2.690168A19.265077 19.265077 0 0 0 89.990687 0H41.741216a19.438636 19.438636 0 0 0-19.438636 19.525415A21.087449 21.087449 0 0 0 23.430715 26.033887l60.745737 168.69959a19.351856 19.351856 0 0 1 0 13.277282l-60.745737 168.69959a19.351856 19.351856 0 0 0 18.223722 26.033887h48.33625a19.265077 19.265077 0 0 0 9.806098-2.603389l287.934793-167.658234h166.182981v301.906313z" p-id="7028"></path></svg>
|
||||
<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="7027"><path d="M519.723387 534.475706a19.438636 19.438636 0 0 0-19.438636 19.438636v450.559809a19.438636 19.438636 0 0 0 5.640675 13.79796 19.178297 19.178297 0 0 0 13.797961 5.727455h133.640621a19.525415 19.525415 0 0 0 13.79796-5.727455 19.091517 19.091517 0 0 0 5.640676-13.79796V553.827562a19.438636 19.438636 0 0 0-19.438636-19.438636h-34.104392V232.482613H798.37276v64.477261a19.351856 19.351856 0 0 0 29.244733 16.835247l164.187049-95.457586a19.525415 19.525415 0 0 0 0-33.757274l-164.187049-95.457587-3.210846-1.735592a18.39728 18.39728 0 0 0-6.508472-1.214915A19.525415 19.525415 0 0 0 798.37276 105.697582V173.559248H393.719372L99.710005 2.690168A19.265077 19.265077 0 0 0 89.990687 0H41.741216a19.438636 19.438636 0 0 0-19.438636 19.525415A21.087449 21.087449 0 0 0 23.430715 26.033887l60.745737 168.69959a19.351856 19.351856 0 0 1 0 13.277282l-60.745737 168.69959a19.351856 19.351856 0 0 0 18.223722 26.033887h48.33625a19.265077 19.265077 0 0 0 9.806098-2.603389l287.934793-167.658234h166.182981v301.906313z" p-id="7028"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -28,14 +28,110 @@
|
|||
</el-col>
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用电统计">
|
||||
<module-one-1-1 label="用电统计" class="left-power">
|
||||
<div style="height: 50%;">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img">
|
||||
<svg-icon icon-class="power" class="an2"></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 50%;" class="power-chart">
|
||||
<el-col :span="8">
|
||||
<div class="chart-bg power-chart1">
|
||||
<div class="chart-proc"></div>
|
||||
<div class="data-top">
|
||||
<div class="chart-data led-number">2999339</div>
|
||||
<div class="chart-unit">kW</div>
|
||||
</div>
|
||||
<div class="data-bottom">
|
||||
施工用电
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="chart-bg power-chart2">
|
||||
<div class="chart-proc" style="height:60%;"></div>
|
||||
<div class="data-top">
|
||||
<div class="chart-data led-number">2999339</div>
|
||||
<div class="chart-unit">(T CO₂)</div>
|
||||
</div>
|
||||
<div class="data-bottom">
|
||||
碳排放
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="chart-bg power-chart3">
|
||||
<div class="chart-proc" style="height:40%;"></div>
|
||||
<div class="data-top">
|
||||
<div class="chart-data led-number">2999339</div>
|
||||
<div class="chart-unit">(T CO₂)</div>
|
||||
</div>
|
||||
<div class="data-bottom">
|
||||
碳减排
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="h100">
|
||||
<module-one-2-2 label="" class="no-title no-border">
|
||||
<module-one-2-2 label="" class="no-title no-border center-top">
|
||||
<div class="top-total-data">
|
||||
<el-col :span="8">
|
||||
<div class="data-item">
|
||||
<div class="td-title">
|
||||
<svg-icon icon-class="money"></svg-icon>
|
||||
碳排放预估总量(T CO₂)
|
||||
</div>
|
||||
<div class="td-number">
|
||||
<people-number :number="225566.1" unit=""></people-number>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="data-item">
|
||||
<div class="td-title">
|
||||
<svg-icon icon-class="money"></svg-icon>
|
||||
碳排放监测累计总量(T CO₂)
|
||||
</div>
|
||||
<div class="td-number">
|
||||
<people-number :number="225566.9" unit=""></people-number>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="data-item">
|
||||
<div class="td-title">
|
||||
<svg-icon icon-class="money"></svg-icon>
|
||||
当月碳排放监测量(T CO₂)
|
||||
</div>
|
||||
<div class="td-number">
|
||||
<people-number :number="225566.9" unit=""></people-number>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
<div class="prj-img-list">
|
||||
<el-carousel height="100%" :autoplay="false">
|
||||
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
|
||||
<el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</module-one-2-2>
|
||||
<module-one-1-2 label="节能减排趋势" class="energy-tendency">
|
||||
<el-col :span="8" class="et-chart1">
|
||||
<img src="images/security1.gif" class="time-img" />
|
||||
<my-chart :key="chartKey" id="energy-tendency-total" width="100%" height="100%"
|
||||
:render="renderChart4"></my-chart>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<my-chart :key="chartKey" id="energy-tendency-line" width="100%" height="100%"
|
||||
:render="renderChart5"></my-chart>
|
||||
</el-col>
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
<el-col :span="6" class="h100">
|
||||
|
|
@ -50,14 +146,21 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from 'lodash.debounce'
|
||||
import SvgIcon from '@/components/SvgIcon.vue';
|
||||
export default {
|
||||
components: { SvgIcon },
|
||||
data() {
|
||||
return {
|
||||
dpi: '',
|
||||
chartKey: 0,
|
||||
prjImgs: [],
|
||||
selProject: null,
|
||||
prjInfo: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('ChangeNav', 6);
|
||||
this.dpi = this.$dpi();
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.dpi != this.$dpi()) {
|
||||
|
|
@ -65,8 +168,23 @@ export default {
|
|||
this.chartKey++;
|
||||
}
|
||||
});
|
||||
this.$bus.$on('projectChange', debounce(prj => {
|
||||
this.selProject = prj;
|
||||
this.init();
|
||||
}));
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
}
|
||||
this.$api.project.getProjectInfo(this.selProject.id).then(d => {
|
||||
this.prjInfo = d.data || {};
|
||||
this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
|
||||
});
|
||||
},
|
||||
renderChart1() {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
|
|
@ -96,7 +214,7 @@ export default {
|
|||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
|
||||
formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),//"{b|b}\n{c|c T CO2}",
|
||||
rich: {
|
||||
b: {
|
||||
color: '#fff',
|
||||
|
|
@ -276,6 +394,72 @@ export default {
|
|||
]
|
||||
};
|
||||
return option;
|
||||
},
|
||||
renderChart4() {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let option = {
|
||||
legend: {
|
||||
|
||||
bottom: is1K ? '0%' : is2K ? '10%' : '5%',
|
||||
left: 'center',
|
||||
itemWidth: is1K ? 25 : is2K ? 30 : 40,
|
||||
itemHeight: is1K ? 14 : is2K ? 20 : 20,
|
||||
itemGap: is1K ? 20 : is2K ? 30 : 40,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||||
}
|
||||
},
|
||||
color: ['#C060F6', '#5087EC', '#FFBB3A'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: is1K ? [40, 66] : is2K ? [60, 100] : [140, 190],
|
||||
center: is1K ? ['50%', '40%'] : is2K ? ['50%', '40%'] : ['50%', '40%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: is1K ? 4 : is2K ? 8 : 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [
|
||||
{ value: 40000, name: '电力' },
|
||||
{ value: 38888, name: '建材' },
|
||||
{ value: 32222, name: '油耗' },
|
||||
],
|
||||
label: {
|
||||
overflow: 'none',
|
||||
formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),
|
||||
rich: {
|
||||
b: {
|
||||
color: '#01e5ff',
|
||||
height: is1K ? 20 : is2K ? 30 : 50,
|
||||
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
||||
},
|
||||
c: {
|
||||
color: '#01e5ff',
|
||||
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
||||
},
|
||||
labelLayout: {
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
return option;
|
||||
},
|
||||
renderChart5() {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let option = {
|
||||
|
||||
};
|
||||
return option;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -301,33 +485,190 @@ export default {
|
|||
}
|
||||
|
||||
.survey_content {
|
||||
height: 100%;
|
||||
|
||||
.survey_content_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
|
||||
.oil-data {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.an1 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
height: 100%;
|
||||
|
||||
.survey_content_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
.an2 {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-power {
|
||||
.svg-icon {
|
||||
fill: #63c8ff;
|
||||
}
|
||||
|
||||
.power-chart {
|
||||
.el-col {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
|
||||
.chart-bg {
|
||||
position: relative;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
height: 100%;
|
||||
|
||||
&.power-chart1 {
|
||||
background-color: #0c142d;
|
||||
|
||||
}
|
||||
|
||||
&.power-chart2 {
|
||||
background-color: #FFBB3A;
|
||||
}
|
||||
|
||||
&.power-chart3 {
|
||||
background-color: #17AD55;
|
||||
}
|
||||
|
||||
.chart-proc {
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background-color: #05275aad;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.data-top {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-flow: column;
|
||||
|
||||
.chart-data {
|
||||
color: #01e5ff;
|
||||
text-shadow: 2px 2px 2px black;
|
||||
}
|
||||
}
|
||||
|
||||
.data-bottom {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-top {
|
||||
.top-total-data {
|
||||
height: 110px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
.el-col {
|
||||
padding: 10px 10px;
|
||||
|
||||
&:first-child {
|
||||
padding: 10px 10px 10px 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: 10px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
background-image: linear-gradient(89deg, #192c6447 0%, #192c648a 100%);
|
||||
|
||||
.td-title {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #01e5ff;
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.td-number {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
justify-content: center;
|
||||
|
||||
.people-number-con {
|
||||
padding: 0px;
|
||||
|
||||
div {
|
||||
margin-right: 2px;
|
||||
width: 25px;
|
||||
color: #01e5ff;
|
||||
text-shadow: 2px 2px 2px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prj-img-list {
|
||||
height: calc(100% - 130px);
|
||||
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__arrow {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #192c648a;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.energy-tendency {
|
||||
.el-col {
|
||||
height: 100%;
|
||||
|
||||
&.et-chart1 {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1920px) {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
|
@ -338,20 +679,22 @@ export default {
|
|||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) ;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
|
||||
.survey_content_img {
|
||||
background-size: 120px 120px;
|
||||
|
||||
.oil-data {
|
||||
.an1 {
|
||||
top: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
.oil-title {
|
||||
bottom: 50px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -359,7 +702,66 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-power {
|
||||
@keyframes bounce2 {
|
||||
from {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.an2 {
|
||||
animation: bounce2 1s infinite;
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
.survey_content_img {
|
||||
background-size: 120px 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
.data-top {
|
||||
.chart-data {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.chart-unit {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-bottom {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.energy-tendency {
|
||||
.el-col {
|
||||
&.et-chart1 {
|
||||
position: relative;
|
||||
|
||||
.time-img {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -79px;
|
||||
margin-left: -56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
|
@ -370,28 +772,137 @@ export default {
|
|||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) ;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
|
||||
.survey_content_img {
|
||||
background-size: 160px 160px !important;
|
||||
|
||||
.oil-data {
|
||||
.an1 {
|
||||
top: 50px !important;
|
||||
font-size: 40px !important;
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
bottom:60px !important;
|
||||
.oil-title {
|
||||
bottom: 60px !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-power {
|
||||
@keyframes bounce2 {
|
||||
from {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.an2 {
|
||||
animation: bounce2 1s infinite;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
.survey_content_img {
|
||||
background-size: 160px 160px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
.data-top {
|
||||
.chart-data {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.chart-unit {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-bottom {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-top {
|
||||
.top-total-data {
|
||||
height: 150px !important;
|
||||
|
||||
.el-col {
|
||||
.data-item {
|
||||
.td-title {
|
||||
height: 60px !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.td-number {
|
||||
height: 90px !important;
|
||||
top: -15px !important;
|
||||
|
||||
.people-number-con {
|
||||
div {
|
||||
width: 35px !important;
|
||||
height: 60px !important;
|
||||
font-size: 50px;
|
||||
margin-right: 4px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prj-img-list {
|
||||
height: calc(100% - 170px) !important;
|
||||
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__arrow {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
|
||||
i {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.energy-tendency {
|
||||
.el-col {
|
||||
&.et-chart1 {
|
||||
position: relative;
|
||||
|
||||
.time-img {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -126px;
|
||||
margin-left: -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2561px) {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
|
@ -402,26 +913,133 @@ export default {
|
|||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) ;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
|
||||
.survey_content_img {
|
||||
background-size: 200px 200px !important;
|
||||
|
||||
.oil-data {
|
||||
.an1 {
|
||||
top: 90px !important;
|
||||
font-size: 60px !important;
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
bottom:80px !important;
|
||||
.oil-title {
|
||||
bottom: 80px !important;
|
||||
font-size: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-power {
|
||||
@keyframes bounce2 {
|
||||
from {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.an2 {
|
||||
animation: bounce2 1s infinite;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
.survey_content_img {
|
||||
background-size: 200px 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
.data-top {
|
||||
.chart-data {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.chart-unit {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-bottom {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-top {
|
||||
.top-total-data {
|
||||
height: 180px !important;
|
||||
|
||||
.el-col {
|
||||
.data-item {
|
||||
.td-title {
|
||||
height: 70px !important;
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.td-number {
|
||||
height: 110px !important;
|
||||
top: -15px !important;
|
||||
|
||||
.people-number-con {
|
||||
div {
|
||||
width: 45px !important;
|
||||
height: 80px !important;
|
||||
font-size: 64px;
|
||||
margin-right: 4px !important;
|
||||
line-height: 80px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prj-img-list {
|
||||
height: calc(100% - 200px) !important;
|
||||
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__arrow {
|
||||
width: 120px !important;
|
||||
height: 120px !important;
|
||||
|
||||
i {
|
||||
font-size: 40px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.energy-tendency {
|
||||
.el-col {
|
||||
&.et-chart1 {
|
||||
position: relative;
|
||||
.time-img {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -261px;
|
||||
margin-left: -199px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue