odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁 : 弹窗提示框样式

Browse Source
This commit is contained in:
dengj
2023-12-18 10:46:55 +08:00
parent 806c0b1db5
commit 48d2004472
4 changed files with 69 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/content/airInfo/AirInfo.vue
View File

@@ -175,9 +175,21 @@ const initChart = () => {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: "transparent", // 设置背景颜色为透明
borderColor: "transparent", // 设置边框颜色为透明
padding: 0, // 设置内边距为0
textStyle: {
fontSize: 40
}
},
formatter: function (params) {
let content = `
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
</div>`;
return content;
},
},
toolbox: {
show: false,
@@ -267,9 +279,20 @@ const initAirChart = () => {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: "transparent", // 设置背景颜色为透明
borderColor: "transparent", // 设置边框颜色为透明
padding: 0, // 设置内边距为0
textStyle: {
fontSize: 40
}
},
formatter: function (params) {
let content = `
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
</div>`;
return content;
},
},
toolbox: {
show: false,

22
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -156,9 +156,25 @@ const initChart = () => {
tooltip: {
show: true,
trigger: "axis",
backgroundColor: "rgba(20,36,51,0.7)", // 设置背景颜色为透明
borderColor: "#6087BA", // 设置边框颜色为透明
padding: 0, // 设置内边距为0
borderWidth:2,
textStyle: {
fontSize: 40
}
fontSize: 40,
},
formatter: (params)=> {
console.log(params)
let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px">${params[0].name}</div>` + '<br/>'
for (let i = 0; i < params.length; i++) {
res += `
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
`;
}
return res
// return content;
},
},
toolbox: {
show: false,
@@ -301,7 +317,7 @@ const initChart = () => {
},
],
};
myEcharts.setOption(option);
myEcharts.setOption(option,true);
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();

14
src/components/content/usedEle/UsedEle.vue
View File

@@ -127,9 +127,21 @@ const initChart = () => {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: "transparent", // 设置背景颜色为透明
borderColor: "transparent", // 设置边框颜色为透明
padding: 0, // 设置内边距为0
textStyle: {
fontSize: 40
}
},
formatter: function (params) {
let content = `
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}日</div>
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">日用电量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">日节省量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
</div>`;
return content;
},
},
toolbox: {
show: false,

13
src/components/content/windPressure/WindPressureList.vue
View File

@@ -129,9 +129,20 @@ const initChart = (type, values) => {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: "transparent", // 设置背景颜色为透明
borderColor: "transparent", // 设置边框颜色为透明
padding: 0, // 设置内边距为0
textStyle: {
fontSize: 40
}
},
formatter: function (params) {
let content = `
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
</div>`;
return content;
},
},
toolbox: {
show: false,