xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改表单构建

Browse Source
master
夜笙歌 4 months ago
parent aa934ae617
commit f464ae3d80
3 changed files with 723 additions and 128 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/demo/bg1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

141
src/views/board/index.vue
Unescape Escape View File

@ -291,6 +291,98 @@
</div> </div>
</div> </div>
<div class="bottomMid"> <div class="bottomMid">
<div class="bg"></div>
<div class="span11" style="top: 9%;left: 15%">市电</div>
<div class="span11" style="top: 9%;left: 60%">车棚光伏</div>
<div class="span11" style="top: 9%;left: 83%">风力发电</div>
<div class="span11" style="top: 92%;left: 15%">柴发</div>
<div class="span11" style="top: 92%;left: 37%">储能电池</div>
<div class="span11" style="top: 92%;left: 60%">充电桩</div>
<div class="span11" style="top: 92%;left: 83%">负荷</div>
<div class="box1" style="top: 43%;left: 20%">
<div class="line">
<div class="line1">220</div>
<div class="line2">V</div>
</div>
<div class="line">
<div class="line1">50</div>
<div class="line2">A</div>
</div>
<div class="line">
<div class="line1">36</div>
<div class="line2">KW</div>
</div>
</div>
<div class="box1" style="top: 43%;left: 65%">
<div class="line">
<div class="line1">220</div>
<div class="line2">V</div>
</div>
<div class="line">
<div class="line1">50</div>
<div class="line2">A</div>
</div>
<div class="line">
<div class="line1">36</div>
<div class="line2">KW</div>
</div>
</div>
<div class="box1" style="top: 43%;left: 88%">
<div class="line">
<div class="line1">220</div>
<div class="line2">V</div>
</div>
<div class="line">
<div class="line1">50</div>
<div class="line2">A</div>
</div>
<div class="line">
<div class="line1">36</div>
<div class="line2">KW</div>
</div>
</div>
<div class="box1" style="top: 68%;left: 43%">
<div class="line">
<div class="line1">220</div>
<div class="line2">V</div>
</div>
<div class="line">
<div class="line1">50</div>
<div class="line2">A</div>
</div>
<div class="line">
<div class="line1">36</div>
<div class="line2">KW</div>
</div>
</div>
<div class="box1" style="top: 68%;left: 65%">
<div class="line">
<div class="line1">220</div>
<div class="line2">V</div>
</div>
<div class="line">
<div class="line1">50</div>
<div class="line2">A</div>
</div>
<div class="line">
<div class="line1">36</div>
<div class="line2">KW</div>
</div>
</div>
<div class="box1" style="top: 68%;left: 88%">
<div class="line">
<div class="line1">220</div>
<div class="line2">V</div>
</div>
<div class="line">
<div class="line1">50</div>
<div class="line2">A</div>
</div>
<div class="line">
<div class="line1">36</div>
<div class="line2">KW</div>
</div>
</div>
</div> </div>
<div class="bottomRightTop"> <div class="bottomRightTop">
<div class="card1" style="margin-top: 1%;margin-bottom: 2%"> <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
@ -1010,6 +1102,55 @@ onMounted(() => {
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
.bg {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-image: url("@/assets/demo/bg1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.span11 {
position: absolute;
transform: translate(-50%, -50%);
color: white;
font-size: 0.8vw;
}
.box1 {
position: absolute;
transform: translate(-50%, -50%);
color: white;
font-size: 0.8vw;
width: 5vw;
}
.line {
width: 100%;
height: 1.3vw;
line-height: 1.3vw;
white-space: nowrap;
color: #626993;
}
.line1 {
width: 70%;
display: inline-block;
text-align: center;
color: #626993;
font-size: 1vw;
}
.line2 {
width: 30%;
display: inline-block;
text-align: center;
color: #626993;
}
</style> </style>

710
src/views/board/index2.vue
Unescape Escape View File

@ -1,6 +1,30 @@
<template> <template>
<div class="board"> <div class="board">
<div class="topNav"></div> <div class="topNav"></div>
<div class="rightImg">
</div>
<div class="right">
<span>
光伏系统
</span>
</div>
<div class="rightImg" style="left:38%;">
</div>
<div class="right" style="left:38%;">
<span>
风力风电
</span>
</div>
<div class="rightImg" style="left:45%;">
</div>
<div class="right" style="left:45%;">
<span>
储能系统
</span>
</div>
<div class="title"> <div class="title">
微电网能源管理系统 微电网能源管理系统
</div> </div>
@ -13,12 +37,24 @@
</div> </div>
<div class="bottomLeftTop"> <div class="bottomLeftTop">
<div class="title3">收益</div> <div class="title3">收益</div>
<div class="card1"> <div class="card11">
<div class="a1"> <div class="a1">
当日收益 当日收益
</div> </div>
<div class="a2" style="white-space: nowrap;text-align: center"> <div class="a2" style="white-space: nowrap;text-align: center">
<span style="padding: 0 1vw;font-size: 1vw">1111</span> <span style="padding: 0 1vw;font-size: 1.1vw">1111</span>
<span>元</span>
</div>
<div class="a3">
<img src="@/assets/demo/2收益.png" alt="" width="100%">
</div>
</div>
<div class="card12">
<div class="a1">
总收益
</div>
<div class="a2" style="white-space: nowrap;text-align: center">
<span style="padding: 0 1vw;font-size: 1.1vw">43212</span>
<span>元</span> <span>元</span>
</div> </div>
<div class="a3"> <div class="a3">
@ -28,17 +64,36 @@
</div> </div>
<div class="bottomLeftMid"> <div class="bottomLeftMid">
<div class="title3">发电量</div> <div class="title3">发电量</div>
<div class="title2">光伏/市电日电量占比</div> <div class="card11">
<div class="num2">100</div> <div class="a1">
<div class="span2">%</div> 当日发电量
<div class="num3">100</div> </div>
<div class="span3">%</div> <div class="a2" style="white-space: nowrap;text-align: center">
<span style="padding: 0 1vw;font-size: 1.1vw">1111</span>
<span>元</span>
</div>
<div class="a3">
<img src="@/assets/demo/2日.png" alt="" width="100%">
</div>
</div>
<div class="card12">
<div class="a1">
总发电量
</div>
<div class="a2" style="white-space: nowrap;text-align: center">
<span style="padding: 0 1vw;font-size: 1.1vw">43212</span>
<span>元</span>
</div>
<div class="a3">
<img src="@/assets/demo/2年.png" alt="" width="100%">
</div>
</div>
</div> </div>
<div class="bottomLeftBottom"> <div class="bottomLeftBottom">
<div class="title3">气象信息</div> <div class="title3">气象信息</div>
<div class="card2"> <div class="card2">
<div class="icon2"> <div class="icon2">
<img src="@/assets/demo/光照.png" alt="" width="100%"> <img src="@/assets/demo/2光照.png" alt="" width="100%">
</div> </div>
<div class="card2Title">光照</div> <div class="card2Title">光照</div>
<div class="card2Span"> <div class="card2Span">
@ -51,7 +106,7 @@
</div> </div>
<div class="card2"> <div class="card2">
<div class="icon2"> <div class="icon2">
<img src="@/assets/demo/风速.png" alt="" width="100%"> <img src="@/assets/demo/2风机.png" alt="" width="100%">
</div> </div>
<div class="card2Title">风速</div> <div class="card2Title">风速</div>
<div class="card2Span"> <div class="card2Span">
@ -64,7 +119,7 @@
</div> </div>
<div class="card2"> <div class="card2">
<div class="icon2"> <div class="icon2">
<img src="@/assets/demo/湿度.png" alt="" width="100%"> <img src="@/assets/demo/2湿度.png" alt="" width="100%">
</div> </div>
<div class="card2Title">湿度</div> <div class="card2Title">湿度</div>
<div class="card2Span"> <div class="card2Span">
@ -77,7 +132,7 @@
</div> </div>
<div class="card2"> <div class="card2">
<div class="icon2"> <div class="icon2">
<img src="@/assets/demo/温度.png" alt="" width="100%"> <img src="@/assets/demo/2温度.png" alt="" width="100%">
</div> </div>
<div class="card2Title">温度</div> <div class="card2Title">温度</div>
<div class="card2Span"> <div class="card2Span">
@ -90,119 +145,375 @@
</div> </div>
</div> </div>
<div class="cards"> <div class="cards">
<div class="card" style="left: 0%;background-color: #DD8F78"> <div class="card" style="left: 0%;background-color: #061043">
<div class="cardTitle">上网电量</div> <div class="cardTitle">上网电量</div>
<div class="cardInfo"> <div class="cardInfo">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> 111
日上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
103.2
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardInfo"> <div class="cardInfo1">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> kw
累计上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
36371
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardIcon icont1"></div>
</div> </div>
<div class="card" style="left: 25%;background-color: #DD8F78"> <div class="card" style="left: 25%;background-color: #061043">
<div class="cardTitle">上网电量</div> <div class="cardTitle">上网电量</div>
<div class="cardInfo"> <div class="cardInfo">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> 111
日上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
103.2
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardInfo"> <div class="cardInfo1">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> kw
累计上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
36371
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardIcon icont1"></div>
</div> </div>
<div class="card" style="left: 50%;background-color: #DD8F78"> <div class="card" style="left: 50%;background-color: #061043">
<div class="cardTitle">上网电量</div> <div class="cardTitle">上网电量</div>
<div class="cardInfo"> <div class="cardInfo">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> 111
日上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
103.2
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardInfo"> <div class="cardInfo1">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> kw
累计上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
36371
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardIcon icont1"></div>
</div> </div>
<div class="card" style="left: 75%;background-color: #DD8F78"> <div class="card" style="left: 75%;background-color: #061043">
<div class="cardTitle">上网电量</div> <div class="cardTitle">上网电量</div>
<div class="cardInfo"> <div class="cardInfo">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> 111
日上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
103.2
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardInfo"> <div class="cardInfo1">
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;"> kw
累计上网电量
</div>
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
36371
</div>
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
kwh
</div>
</div> </div>
<div class="cardIcon icont1"></div>
</div> </div>
</div> </div>
<div class="bottomRight"> <div class="bottomRight">
<div class="title3">逆变器参数</div> <div class="title3">逆变器参数</div>
<div class="box">
<div class="boxLeft"></div>
<div class="boxTable1">
<div class="boxTableTh">
<div class="boxTableTd" style="width: 50%">输出功率（kw）</div>
<div class="boxTableTd" style="width: 50%">0.1</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 50%">日发电量（kwh）</div>
<div class="boxTableTd" style="width: 50%">30</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 50%">总发电量（kwh）</div>
<div class="boxTableTd" style="width: 50%">2222</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 50%">逆变器状态</div>
<div class="boxTableTd" style="width: 50%">
<el-text class="mx-1" type="success">运行</el-text>
</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 50%">工作状态</div>
<div class="boxTableTd" style="width: 50%">
<el-text class="mx-1" type="success">并网</el-text>
</div>
</div>
</div>
</div>
<div class="box">
<div class="boxTitle">功率曲线</div>
<div class="boxTitle1">2022年2月2日</div>
<Chart ref="chartRef" />
</div>
<div class="box">
<div class="boxTitle">直流测</div>
<div class="boxTable">
<div class="boxTableTh">
<div class="boxTableTd" style="width: 40%">输入线路</div>
<div class="boxTableTd" style="width: 30%">电压（V）</div>
<div class="boxTableTd" style="width: 30%">电流（A）</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 40%">pv1</div>
<div class="boxTableTd" style="width: 30%">220</div>
<div class="boxTableTd" style="width: 30%">36</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 40%">pv2</div>
<div class="boxTableTd" style="width: 30%">220</div>
<div class="boxTableTd" style="width: 30%">36</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 40%">pv3</div>
<div class="boxTableTd" style="width: 30%">220</div>
<div class="boxTableTd" style="width: 30%">36</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 40%">pv4</div>
<div class="boxTableTd" style="width: 30%">220</div>
<div class="boxTableTd" style="width: 30%">36</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 40%">pv5</div>
<div class="boxTableTd" style="width: 30%">220</div>
<div class="boxTableTd" style="width: 30%">36</div>
</div>
</div>
</div>
<div class="box">
<div class="boxTitle">交流测</div>
<div class="boxTable">
<div class="boxTableTh">
<div class="boxTableTd" style="width: 25%">参数</div>
<div class="boxTableTd" style="width: 25%">a相</div>
<div class="boxTableTd" style="width: 25%">b相</div>
<div class="boxTableTd" style="width: 25%">c相</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 25%">电压（V）</div>
<div class="boxTableTd" style="width: 25%">220</div>
<div class="boxTableTd" style="width: 25%">222</div>
<div class="boxTableTd" style="width: 25%">222</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 25%">电流</div>
<div class="boxTableTd" style="width: 25%">0.4</div>
<div class="boxTableTd" style="width: 25%">0.4</div>
<div class="boxTableTd" style="width: 25%">0.4</div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 25%">总有功功率</div>
<div class="boxTableTd" style="width: 25%"></div>
<div class="boxTableTd" style="width: 25%">0.1</div>
<div class="boxTableTd" style="width: 25%"></div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 25%">功率因数</div>
<div class="boxTableTd" style="width: 25%"></div>
<div class="boxTableTd" style="width: 25%">1</div>
<div class="boxTableTd" style="width: 25%"></div>
</div>
<div class="boxTableTh">
<div class="boxTableTd" style="width: 25%">频率</div>
<div class="boxTableTd" style="width: 25%"></div>
<div class="boxTableTd" style="width: 25%">50</div>
<div class="boxTableTd" style="width: 25%"></div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Chart from '@/components/chart.vue';
import * as echarts from 'echarts';
const chartRef = ref();
onMounted(() => {
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#fff',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
}
},
backgroundColor: '#fff',
textStyle: {
color: '#fff'
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
grid: {
top: '30%',
bottom: '10%'
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7'],
axisLine: {
lineStyle: {
color: '#DCE2E8'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 0,
// margin:文字到x轴的距离
margin: -10
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
/*
除了padding[0]建议必须是0之外，其他三项可随意设置
和CSSpadding相同，[上，右，下，左]
如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
padding[2]的10:
10 = 文字距下边线的距离 + 下边线的宽度
如：UI图中文字距下边线距离为7 下边线宽度为2
则padding: [0, 0, 9, 0]
*/
// 这里的margin和axisLabel的margin要一致!
margin: 0,
// 移入时的字体大小
fontSize: 12
}
},
boundaryGap: false
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
}
],
series: [
{
name: '充电桩+负载回路',
type: 'line',
data: [0, 0, 0, 0, 0, 0, 0],
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0]
}
}
},
{
name: '光伏+风电',
type: 'line',
data: [0, 3, 3, 6, 7, 6, 4],
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#73DD39'
},
{
offset: 1,
color: '#73DDFF'
}
]),
shadowColor: 'rgba(115,221,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[1],
borderColor: colorList[1]
}
}
},
{
name: '储能',
type: 'line',
data: [0, 0, 0, 0, 0, 0, 0],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#fe9a'
},
{
offset: 1,
color: '#fe9a8b'
}
]),
shadowColor: 'rgba(254,154,139, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[2],
borderColor: colorList[2]
}
}
}
]
};
chartRef.value.setData(option);
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.topNav { .topNav {
background-image: url("@/assets/demo/top.jpg"); background-image: url("@/assets/demo/top.jpg");
position: absolute; position: absolute;
width: 90%; width: 100%;
height: 7%; height: 7%;
top: 0; top: 0;
left: 0; left: 0;
@ -211,7 +522,7 @@
} }
.board { .board {
background-color: #020A3A; background-color: #030A35;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -221,12 +532,36 @@
.title { .title {
position: absolute; position: absolute;
top: 2%; top: 3%;
left: 2%; left: 3%;
font-size: 1vw; font-size: 1vw;
color: white; color: white;
} }
.rightImg {
transform: rotateX(180deg);
background-image: url('@/assets/demo/subheadClick.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 8vw;
height: 1.66vw;
top: 3.8%;
left: 31%;
}
.right {
position: absolute;
width: 8vw;
height: 1.66vw;
top: 3.8%;
left: 31%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #fff;
text-align: center;
}
.rightTop { .rightTop {
position: absolute; position: absolute;
top: 2%; top: 2%;
@ -244,6 +579,7 @@
} }
.card { .card {
border: 1px solid #fff3;
position: absolute; position: absolute;
top: 0%; top: 0%;
width: 24.5%; width: 24.5%;
@ -255,7 +591,25 @@
} }
.cardTitle { .cardTitle {
margin-left: 0.5vw; position: absolute;
top: 70%;
left: 50%;
font-size: 1vw;
transform: translateX(-50%);
}
.cardInfo {
position: absolute;
top: 20%;
left: 30%;
font-size: 2vw;
}
.cardInfo1 {
position: absolute;
top: 20%;
left: 70%;
font-size: 1.4vw;
} }
.cardItem { .cardItem {
@ -291,50 +645,75 @@
} }
.bottomRight { .bottomRight {
border: 1px solid #fff3;
position: absolute; position: absolute;
top: 23.5%; top: 25.5%;
left: 25.6%; left: 25.6%;
width: 73.5%; width: 73.5%;
height: 76%; height: 74%;
} }
.card1 { .card11 {
width: 40%; width: 40%;
height: 80%; height: 80%;
top: 10%; top: 10%;
left: 10%; left: 10%;
position: absolute; position: absolute;
}
.a1 { .card12 {
position: absolute; width: 40%;
color: white; height: 80%;
text-align: center; top: 10%;
//background-color: #C28E4766; left: 50%;
top: 10%; position: absolute;
left: 50%; }
transform: translate(-50%, -50%);
width: 60%;
height: 1vw;
}
.a2 { .a1 {
position: absolute; position: absolute;
color: white; color: white;
top: 50%; text-align: center;
left: 50%; //background-color: #C28E4766;
transform: translate(-50%, -50%); top: 10%;
width: 100%; left: 50%;
height: 20%; transform: translate(-50%, -50%);
} width: 60%;
height: 1vw;
}
.a3 { .a2 {
position: absolute; position: absolute;
top: 70%; color: #69FF7B;
left: 50%; top: 45%;
transform: translate(-50%, -50%); left: 50%;
width: 70%; transform: translate(-50%, -50%);
height: 20%; width: 100%;
} height: 20%;
font-size: 0.8vw;
}
.a3 {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
width: 4.6vw;
height: 4vw;
}
.icont1 {
background-image: url('@/assets/demo/2电机.png');
}
.cardIcon {
position: absolute;
top: 50%;
left: 1%;
transform: translateY(-50%);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 4vw;
height: 3vw;
} }
.title1 { .title1 {
@ -405,7 +784,6 @@
.title3 { .title3 {
width: 100%; width: 100%;
height: 10%;
line-height: 2.4vh; line-height: 2.4vh;
font-size: 0.8vw; font-size: 0.8vw;
text-align: center; text-align: center;
@ -452,6 +830,82 @@
color: white; color: white;
font-size: 0.8vw; font-size: 0.8vw;
} }
.box {
display: inline-block;
width: 48%;
height: 46%;
margin: 0 1% 1% 1%;
background-color: #131C39;
position: relative;
}
.boxTitle {
position: absolute;
top: 3%;
left: 3%;
color: white;
font-size: 1vw;
}
.boxTitle1 {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 1vw;
}
.boxTable {
position: absolute;
top: 20%;
width: 96%;
left: 2%;
height: 75%;
}
.boxTableTh {
border-bottom: 1px solid #fff2;
}
.boxTableTd {
text-align: center;
display: inline-block;
line-height: 2vw;
color: #fff;
}
.boxLeft {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
width: 5vw;
height: 5vw;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("@/assets/demo/2光伏.png");
}
.boxTable1 {
position: absolute;
top: 10%;
width: 60%;
left: 30%;
height: 80%;
}
.boxTableTh {
border-bottom: 1px solid #fff2;
}
.boxTableTd {
text-align: center;
display: inline-block;
line-height: 2vw;
color: #fff;
}
</style> </style>

Write Preview
Loading…
Cancel
Save