This commit is contained in:
lll
parent
cdc8569666
commit
4be9b25cbf
|
|
@ -13,7 +13,6 @@
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-gl": "^2.0.9",
|
||||||
"lib-flexible": "^0.3.2",
|
|
||||||
"postcss-preset-env": "^9.3.0",
|
"postcss-preset-env": "^9.3.0",
|
||||||
"postcss-pxtorem": "^5.1.1",
|
"postcss-pxtorem": "^5.1.1",
|
||||||
"register-service-worker": "^1.7.2",
|
"register-service-worker": "^1.7.2",
|
||||||
|
|
@ -7877,11 +7876,6 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/lib-flexible": {
|
|
||||||
"version": "0.3.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
|
|
||||||
"integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
|
|
||||||
},
|
|
||||||
"node_modules/lilconfig": {
|
"node_modules/lilconfig": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
|
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
|
||||||
|
|
@ -18803,11 +18797,6 @@
|
||||||
"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
|
"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"lib-flexible": {
|
|
||||||
"version": "0.3.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
|
|
||||||
"integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
|
|
||||||
},
|
|
||||||
"lilconfig": {
|
"lilconfig": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
|
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-gl": "^2.0.9",
|
||||||
"lib-flexible": "^0.3.2",
|
|
||||||
"postcss-preset-env": "^9.3.0",
|
"postcss-preset-env": "^9.3.0",
|
||||||
"postcss-pxtorem": "^5.1.1",
|
"postcss-pxtorem": "^5.1.1",
|
||||||
"register-service-worker": "^1.7.2",
|
"register-service-worker": "^1.7.2",
|
||||||
|
|
|
||||||
16
src/App.vue
16
src/App.vue
|
|
@ -5,15 +5,11 @@
|
||||||
</template>
|
</template>
|
||||||
<script></script>
|
<script></script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#app {
|
#app {
|
||||||
// width: 100vw;
|
width: 100vw;
|
||||||
// height: 100vh;
|
height: 100vh;
|
||||||
width: 1920px;
|
// width: 1920px;
|
||||||
height: 1080px;
|
// height: 1080px;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-left: 13px;
|
padding-left: 13px;
|
||||||
padding-bottom: 13px;
|
padding-bottom: 13px;
|
||||||
|
|
@ -22,4 +18,8 @@
|
||||||
background-color: #04134c;
|
background-color: #04134c;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,10 +19,10 @@ const routes = [
|
||||||
component: () => import("../views/ZHDY.vue"),
|
component: () => import("../views/ZHDY.vue"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path:"/xqxy",
|
path: "/xqxy",
|
||||||
name:"xqxy",
|
name: "xqxy",
|
||||||
component:()=>import("../views/XQXY.vue"),
|
component: () => import("../views/XQXY.vue"),
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,49 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="ztynqk"></div>
|
<div class="ztynqk">
|
||||||
|
<p class="title">总体用能情况</p>
|
||||||
|
<ul class="typeBox">
|
||||||
|
<li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
|
||||||
|
<li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
|
||||||
|
<li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
|
||||||
|
</ul>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottomBox">
|
||||||
|
<img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p>用电量(MWH)</p>
|
||||||
|
<p><span>84.00</span><span>-13.20%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomBox">
|
||||||
|
<img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p>用蒸汽量(m2)</p>
|
||||||
|
<p><span>45.32</span><span>-23.20%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomBox">
|
||||||
|
<img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p>用水量(m2)</p>
|
||||||
|
<p><span>56.00</span><span>-33.20%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomBox">
|
||||||
|
<img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p>用汽量(m2)</p>
|
||||||
|
<p><span>37.00</span><span>43.20%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="ssfhzs"></div>
|
<div class="ssfhzs"></div>
|
||||||
<div class="ynl"></div>
|
<div class="ynl"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="map"></div>
|
<div id="map"></div>
|
||||||
<div class="yhzyfbqk"></div>
|
<div class="yhzyfbqk"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|
@ -23,7 +60,278 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script></script>
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
//后端返回的数据
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
name: "济南市",
|
||||||
|
value: 1,
|
||||||
|
coord: [117.000923, 36.675807],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "青岛市",
|
||||||
|
value: 2,
|
||||||
|
coord: [120.382639, 36.067082],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "淄博市",
|
||||||
|
value: 3,
|
||||||
|
coord: [118.059134, 36.804685],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "枣庄市",
|
||||||
|
value: 4,
|
||||||
|
coord: [117.557964, 34.856424],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "东营市",
|
||||||
|
value: 5,
|
||||||
|
coord: [118.674767, 37.434751],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "烟台市",
|
||||||
|
value: 6,
|
||||||
|
coord: [121.447935, 37.463822],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "潍坊市",
|
||||||
|
value: 7,
|
||||||
|
coord: [119.161756, 36.706774],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "济宁市",
|
||||||
|
value: 8,
|
||||||
|
coord: [116.587245, 35.415393],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "泰安市",
|
||||||
|
value: 9,
|
||||||
|
coord: [117.089415, 36.188078],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "威海市",
|
||||||
|
value: 10,
|
||||||
|
coord: [122.120419, 37.513068],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "日照市",
|
||||||
|
value: 11,
|
||||||
|
coord: [119.526888, 35.416377],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "临沂市",
|
||||||
|
value: 12,
|
||||||
|
coord: [118.356448, 35.104672],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "德州市",
|
||||||
|
value: 13,
|
||||||
|
coord: [116.357465, 37.434093],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "聊城市",
|
||||||
|
value: 14,
|
||||||
|
coord: [115.986869, 36.455829],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "滨州市",
|
||||||
|
value: 15,
|
||||||
|
coord: [118.016974, 37.383542],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "菏泽市",
|
||||||
|
value: 16,
|
||||||
|
coord: [115.469381, 35.246531],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
var chartDom = document.getElementById("map");
|
||||||
|
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
//获取山东地图数据。
|
||||||
|
$.get(
|
||||||
|
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
|
||||||
|
function (geojson) {
|
||||||
|
echarts.registerMap("山东", geojson);
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
// show: false,
|
||||||
|
},
|
||||||
|
name: "山东",
|
||||||
|
type: "map",
|
||||||
|
map: "山东",
|
||||||
|
boxDepth: 60, //地图倾斜度
|
||||||
|
regionHeight: 6, //地图厚度
|
||||||
|
aspectScale: 0.9, //地图长宽比
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#70EAF4", // 高亮时候地图显示的颜色
|
||||||
|
borderWidth: 2, // 高亮时的边框宽度
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fontSize: 12, // 选中地图文字字号和字体颜色
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true, //是否显示市
|
||||||
|
formatter: function (params) {
|
||||||
|
var name = params.name;
|
||||||
|
var value = params.value;
|
||||||
|
var text = ` {fline|${value}}\n{tline|${name}} `;
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: "#000", //文字颜色
|
||||||
|
fontSize: 16, //文字大小
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
// backgroundColor: {
|
||||||
|
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||||
|
// },
|
||||||
|
// padding: [15, 20],
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
fline: {
|
||||||
|
padding: [0, 35],
|
||||||
|
color: "#FDCC00",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
tline: {
|
||||||
|
padding: [0, 27],
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.8, // 透明度
|
||||||
|
borderWidth: 2, //分界线宽度
|
||||||
|
borderColor: "#0699E4", //分界线颜色
|
||||||
|
areaColor: {
|
||||||
|
x: 0.5,
|
||||||
|
y: 0.7,
|
||||||
|
r: 0.5,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(20,110,230,0.4)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(6,33,121,0.4)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
groundplane: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: data,
|
||||||
|
z: 999,
|
||||||
|
shading: "realistic",
|
||||||
|
// 真实感材质相关配置 shading: 'realistic'时有效
|
||||||
|
realisticMaterial: {
|
||||||
|
detailTexture: "rgb(0, 102, 204)", // 纹理贴图
|
||||||
|
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||||
|
roughness: 0.8, // 调整光照模型的粗糙度
|
||||||
|
metalness: 0.0, // 调整金属感，0.0 为非金属
|
||||||
|
roughnessAdjust: 0,
|
||||||
|
},
|
||||||
|
viewControl: {
|
||||||
|
distance: 90, // 地图视角 控制初始大小
|
||||||
|
rotateSensitivity: 0, // 旋转
|
||||||
|
zoomSensitivity: 1.5, // 缩放
|
||||||
|
},
|
||||||
|
zoom: 1.25,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
animation: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
myChart.on("click", chartClick);
|
||||||
|
//点击地图区域事件
|
||||||
|
function chartClick(param) {
|
||||||
|
console.log(param);
|
||||||
|
myChart.setOption(option, false);
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
// var selectedPro = param.name;
|
||||||
|
// if (!cityProper[selectedPro]) {
|
||||||
|
// option.series.splice(1);
|
||||||
|
// option.legend = null;
|
||||||
|
// option.visualMap = null;
|
||||||
|
// myChart.setOption(option, true);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
//获取点击区域数据
|
||||||
|
// $.get(cityProper[selectedPro], function (geojson) {
|
||||||
|
// echarts.registerMap(selectedPro, geojson);
|
||||||
|
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
|
||||||
|
// option.series[0] = {
|
||||||
|
// name: "",
|
||||||
|
// type: "map",
|
||||||
|
// map: selectedPro,
|
||||||
|
// boxDepth: 80, //地图倾斜度
|
||||||
|
// regionHeight: 5, //地图厚度
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// emphasis: {
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// groundplane: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// data: data,
|
||||||
|
// shading: "realistic",
|
||||||
|
// // 真实感材质相关配置 shading: 'realistic'时有效
|
||||||
|
// realisticMaterial: {
|
||||||
|
// detailTexture: "#fff", // 纹理贴图
|
||||||
|
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||||
|
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||||||
|
// metalness: 0, // 0材质是非金属 ，1金属
|
||||||
|
// roughnessAdjust: 0,
|
||||||
|
// },
|
||||||
|
// viewControl: {
|
||||||
|
// distance: 30, // 地图视角 控制初始大小
|
||||||
|
// rotateSensitivity: 1, // 旋转
|
||||||
|
// zoomSensitivity: 1, // 缩放
|
||||||
|
// },
|
||||||
|
// };
|
||||||
|
// myChart.setOption(option);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.initMap();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.top {
|
.top {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
|
|
@ -82,30 +390,100 @@
|
||||||
height: 27.3vh;
|
height: 27.3vh;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||||||
background-size: cover;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 8.3vw;
|
left: 50%;
|
||||||
width: 7.5vw;
|
transform: translateX(-50%);
|
||||||
height: 3.3vh;
|
font-size: 18px;
|
||||||
font-size: 1.7vh;
|
|
||||||
font-family: "Source Han Sans";
|
font-family: "Source Han Sans";
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
line-height: 3.3vh;
|
}
|
||||||
|
|
||||||
|
.typeBox {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 54px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
li {
|
||||||
|
width: 39px;
|
||||||
|
height: 21px;
|
||||||
|
background: rgba(29, 29, 29, 0.5);
|
||||||
|
border-radius: 2px 2px 2px 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid #666666;
|
||||||
|
text-align: center;
|
||||||
|
margin: 2.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: rgba(10, 167, 255, 0.3);
|
||||||
|
border: 1px solid #0aa7ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 90px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.bottomBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 180px;
|
||||||
|
margin: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
p:nth-of-type(1) {
|
||||||
|
width: 120px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: " AlibabaPuHuiTi";
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "AlibabaPuHuiTi";
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "AlibabaPuHuiTi";
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ssfhzs {
|
.ssfhzs {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 29.2vh;
|
height: 29.2vh;
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.ynl {
|
.ynl {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
|
|
@ -113,27 +491,47 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 27.2vh;
|
height: 27.2vh;
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.ynflzb {
|
.ynflzb {
|
||||||
height: 27.2vh;
|
height: 27.2vh;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/组 3118.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.qyydlpm {
|
.qyydlpm {
|
||||||
height: 32.7vh;
|
height: 32.7vh;
|
||||||
background-color: aqua;
|
background-color: aqua;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/组 3119.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.center {
|
.center {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.map {
|
position: relative;
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 994px;
|
||||||
|
position: absolute;
|
||||||
|
height: 627px;
|
||||||
height: 58vh;
|
height: 58vh;
|
||||||
background-color: red;
|
background: url(../assets/客户侧总体用能情况分析/背景.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.yhzyfbqk {
|
.yhzyfbqk {
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
|
width: 100%;
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
|
background: url("../assets/客户侧总体用能情况分析/组 3120.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue