777 lines
21 KiB
Vue
777 lines
21 KiB
Vue
<template>
|
||
<div class="MonitoringPointScale">
|
||
<div class="boxT" @mouseleave="handleMouseLeave">
|
||
<img class="imgicon" src="../images/GM.png" alt="" srcset="" />
|
||
<span>监测点规模</span>
|
||
<div class="divSpan">
|
||
<span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
|
||
∣
|
||
<span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
|
||
</div>
|
||
</div>
|
||
<div class="boxB" ref="electr0_7" v-show="isshow">
|
||
<div id="electr0_7" style="width: 100%; height: 100%" />
|
||
<div class="boxnum" id="boxnum">
|
||
<div class="zong">
|
||
<div class="zong_title" id="zong_title">总数</div>
|
||
<div class="zong_num" id="zong_num">{{ total }}</div>
|
||
</div>
|
||
<div class="add">
|
||
<div class="add_title" id="add_title">本月新增</div>
|
||
<div class="add_num" id="add_num">{{ add }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="boxB" ref="electr0_8" v-show="!isshow">
|
||
<div id="electr0_8" style="width: 100%; height: 100%" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getMonitoringPointScale,
|
||
getLoadTypeData,
|
||
} from "@/api/center/DropEvent.js";
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
isshow: true,
|
||
flag: 0,
|
||
Num: 0,
|
||
zoom: "", //图表焦点校验
|
||
total: "", //图表焦点校验
|
||
add: "", //图表焦点校验
|
||
formData: {
|
||
deptIndex: "",
|
||
searchBeginTime: this.getCurrentMonthFirst(),
|
||
searchEndTime: this.getNowFormatDate(),
|
||
},
|
||
|
||
piedata: [
|
||
{ value: 1048, name: "安徽省" },
|
||
{ value: 735, name: "江苏省" },
|
||
{ value: 580, name: "浙江省" },
|
||
{ value: 484, name: "云南省" },
|
||
{ value: 300, name: "海南省" },
|
||
{ value: 300, name: "福建省" },
|
||
{ value: 300, name: "广东省" },
|
||
],
|
||
timeA: null,
|
||
timeB: null,
|
||
calm: false,
|
||
electr7List: [],
|
||
electr8List: [],
|
||
myChart2: null,
|
||
};
|
||
},
|
||
created() {
|
||
this.formData.deptIndex = JSON.parse(
|
||
window.localStorage.getItem("adminInfo")
|
||
).deptId;
|
||
},
|
||
mounted() {
|
||
this.zoom = 1 / document.body.style.zoom;
|
||
window.addEventListener("resize", () => {
|
||
this.zoom = 1 / document.body.style.zoom;
|
||
});
|
||
getMonitoringPointScale(this.formData).then((res) => {
|
||
this.total = res.data.monitorTotalCount;
|
||
this.add = res.data.monitorAddCount;
|
||
this.electr7List = res;
|
||
|
||
this.electr7();
|
||
});
|
||
getLoadTypeData(this.formData).then((res) => {
|
||
this.electr8List = res;
|
||
});
|
||
this.info();
|
||
},
|
||
beforeDestroy() {
|
||
for (let i = 1; i < 10000; i++) {
|
||
clearInterval(i);
|
||
}
|
||
for (let i = 1; i < 10000; i++) {
|
||
clearTimeout(i);
|
||
}
|
||
},
|
||
methods: {
|
||
info() {
|
||
this.timeA = setTimeout(() => {
|
||
this.tab2();
|
||
}, 15000);
|
||
this.timeB = setTimeout(() => {
|
||
this.tab1();
|
||
this.info();
|
||
}, 60000);
|
||
},
|
||
handleMouseLeave() {
|
||
if (this.calm) {
|
||
this.calm = false;
|
||
this.$emit("Remove");
|
||
// this.info();
|
||
}
|
||
},
|
||
//获取当月第一天日期
|
||
getCurrentMonthFirst() {
|
||
var date = new Date();
|
||
var year = date.getFullYear();
|
||
date.setDate(1);
|
||
var month = parseInt(date.getMonth() + 1);
|
||
var day = date.getDate();
|
||
if (month < 10) {
|
||
month = "0" + month;
|
||
}
|
||
if (day < 10) {
|
||
day = "0" + day;
|
||
}
|
||
return year + "-" + month + "-" + day;
|
||
},
|
||
//获取当天日期
|
||
getNowFormatDate() {
|
||
var date = new Date();
|
||
var year = date.getFullYear();
|
||
var month = date.getMonth() + 1;
|
||
var day = date.getDate();
|
||
if (month < 10) {
|
||
month = "0" + month;
|
||
}
|
||
if (day < 10) {
|
||
day = "0" + day;
|
||
}
|
||
return year + "-" + month + "-" + day;
|
||
},
|
||
fontSize(res) {
|
||
let clientWidth = document.documentElement.clientWidth;
|
||
if (!clientWidth) return;
|
||
let fontSize = clientWidth / 1920;
|
||
return res * fontSize;
|
||
},
|
||
tab1(e, v) {
|
||
this.flag = 0;
|
||
this.electr7();
|
||
|
||
this.isshow = true;
|
||
if (e == 0) {
|
||
if (v == 1) {
|
||
this.$emit("control", { name: "MonitoringPointScale", val: 1 });
|
||
}
|
||
clearTimeout(this.timeA);
|
||
clearTimeout(this.timeB);
|
||
this.calm = true;
|
||
}
|
||
},
|
||
tab2(e, v) {
|
||
this.flag = 1;
|
||
this.electr8();
|
||
this.isshow = false;
|
||
if (e == 0) {
|
||
if (v == 1) {
|
||
this.$emit("control", { name: "MonitoringPointScale", val: 2 });
|
||
}
|
||
|
||
clearTimeout(this.timeA);
|
||
clearTimeout(this.timeB);
|
||
this.calm = true;
|
||
}
|
||
},
|
||
// 监测点规模片区
|
||
async electr7() {
|
||
let EchartsData = [];
|
||
|
||
let arrData = this.electr7List.data.param;
|
||
arrData.forEach((item) => {
|
||
item.name = item.name;
|
||
item.value = item.count;
|
||
});
|
||
EchartsData = arrData;
|
||
let echarts = require("echarts");
|
||
let domID1 = document.getElementById("electr0_7");
|
||
let boxnum = document.getElementById("boxnum");
|
||
let zong_title = document.getElementById("zong_title");
|
||
let zong_num = document.getElementById("zong_num");
|
||
let add_title = document.getElementById("add_title");
|
||
let add_num = document.getElementById("add_num");
|
||
setTimeout(() => {
|
||
(domID1.style.width = this.$refs.electr0_7.offsetWidth + "px"),
|
||
(domID1.style.height = this.$refs.electr0_7.offsetHeight + "px");
|
||
boxnum.style.width = this.$refs.electr0_7.offsetWidth / 5 + "px";
|
||
zong_title.style.fontSize = ".75rem";
|
||
zong_num.style.fontSize = "1.5rem";
|
||
add_title.style.fontSize = ".75rem";
|
||
add_num.style.fontSize = "1.5rem";
|
||
}, 0);
|
||
let color = [
|
||
"#d909e0",
|
||
"#ffe400",
|
||
"#ff9a09",
|
||
"#ef1e5f",
|
||
"#23cbe5",
|
||
"#ec561b",
|
||
"#ffa500",
|
||
"#41E398",
|
||
"#12AFA6",
|
||
"#FF0000",
|
||
"#CC99FF",
|
||
"#0099CC",
|
||
"#FF6699",
|
||
"#00FF7F",
|
||
"#D2691E",
|
||
"#FF6347",
|
||
"#A52A2A",
|
||
"#808080",
|
||
"#DEB887",
|
||
"#FFD700",
|
||
"#556B2F",
|
||
"#7FFF00",
|
||
"#808000",
|
||
"#40E0D0",
|
||
"#00FFFF",
|
||
"#8A2BE2",
|
||
"#EE82EE",
|
||
"#000080",
|
||
"#DC143C",
|
||
"#008080",
|
||
"#8FBC8F",
|
||
"#F5DEB3",
|
||
"#FF7F50",
|
||
"#FFF5EE",
|
||
];
|
||
let myChart2 = echarts.init(domID1);
|
||
let option = {
|
||
title: {
|
||
text: "片区分布",
|
||
left: "center",
|
||
top: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
backgroundColor: "rgba(8,36,68,.7)",
|
||
color: "#00ffff",
|
||
textStyle: {
|
||
color: "#00ffff",
|
||
},
|
||
},
|
||
legend: {
|
||
type: "scroll",
|
||
orient: "vertical",
|
||
left: 0,
|
||
top: 5,
|
||
bottom: 10,
|
||
// itemHeight: 8,
|
||
pageIconColor: "white", //激活的分页按钮颜色
|
||
pageTextStyle: {
|
||
color: "#35ffff",
|
||
},
|
||
pageIconInactiveColor: "#CCC", //没激活的分页按钮颜色
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
//设置自定义legend 的重点
|
||
// formatter: function(name) {
|
||
// // 获取legend显示内容
|
||
// let data = EchartsData;//这个是展示的数据
|
||
// let total = 0;
|
||
// let tarValue = 0;
|
||
// let value = 0;
|
||
// for (let i = 0, l = data.length; i < l; i++) {
|
||
// total += data[i].value;
|
||
// if (data[i].name == name) {
|
||
// tarValue = data[i].value;
|
||
// value = data[i].value;
|
||
// }
|
||
// }
|
||
// let p = total== 0? 0 :((tarValue / total) * 100).toFixed(1);
|
||
// return [
|
||
// "{a|" +
|
||
// echarts.format.truncateText(
|
||
// name,
|
||
// 80,
|
||
// "14px Microsoft Yahei",
|
||
// "…"//如果宽度超过80会出现...
|
||
// ) +
|
||
// "}",
|
||
// "{b|" + p + "%}",
|
||
// "{x|" + value + "}" //a、b、x、跟下面的rich对应
|
||
// ].join(" ");
|
||
// },
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["55%", "65%"],
|
||
// center: ['60%', '60%'],
|
||
data: EchartsData.map((item, index) => {
|
||
item.label = {
|
||
color: color[index],
|
||
};
|
||
return item;
|
||
}),
|
||
itemStyle: {
|
||
color: (params) => {
|
||
var index = params.dataIndex;
|
||
var color = [
|
||
"#d909e0",
|
||
"#ffe400",
|
||
"#ff9a09",
|
||
"#ef1e5f",
|
||
"#23cbe5",
|
||
"#ec561b",
|
||
"#ffa500",
|
||
"#41E398",
|
||
"#12AFA6",
|
||
"#FF0000",
|
||
"#CC99FF",
|
||
"#0099CC",
|
||
"#FF6699",
|
||
"#00FF7F",
|
||
"#D2691E",
|
||
"#FF6347",
|
||
"#A52A2A",
|
||
"#808080",
|
||
"#DEB887",
|
||
"#FFD700",
|
||
"#556B2F",
|
||
"#7FFF00",
|
||
"#808000",
|
||
"#40E0D0",
|
||
"#00FFFF",
|
||
"#8A2BE2",
|
||
"#EE82EE",
|
||
"#000080",
|
||
"#DC143C",
|
||
"#008080",
|
||
"#8FBC8F",
|
||
"#F5DEB3",
|
||
"#FF7F50",
|
||
"#FFF5EE",
|
||
];
|
||
return color[index];
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
option && myChart2.setOption(option, true);
|
||
//window.echartsArr.push(myChart2);
|
||
setTimeout(function () {
|
||
myChart2.resize();
|
||
}, 0);
|
||
},
|
||
async electr8() {
|
||
let echarts = require("echarts");
|
||
let _this = this;
|
||
let domID1 = document.getElementById("electr0_8");
|
||
setTimeout(() => {
|
||
(domID1.style.width = this.$refs.electr0_8.offsetWidth + "px"),
|
||
(domID1.style.height = this.$refs.electr0_8.offsetHeight + "px");
|
||
}, 0);
|
||
if (_this.myChart2 != null) {
|
||
_this.myChart2.dispose();
|
||
clearInterval(_this.time2);
|
||
}
|
||
_this.myChart2 = echarts.init(domID1);
|
||
// const data = await getLoadTypeData(this.formData);
|
||
let cityList = [];
|
||
let cityData = [];
|
||
|
||
this.electr8List.data.param.sort((a, b) => b.count - a.count).forEach((item) => {
|
||
if (item.count != 0) {
|
||
cityList.push(item.name);
|
||
cityData.push(item.count);
|
||
}
|
||
|
||
});
|
||
// 数据处理
|
||
var charts = {
|
||
// 按顺序排列从大到小
|
||
cityList: cityList,
|
||
cityData: cityData,
|
||
};
|
||
var top10CityList = charts.cityList;
|
||
var top10CityData = charts.cityData;
|
||
var color = [
|
||
"rgba(3,255,238",
|
||
"rgba(218,3,255",
|
||
"rgba(255,248,3",
|
||
"rgba(120,255,3",
|
||
"rgba(255,218,3",
|
||
"rgba(3,204,255",
|
||
"rgba(3,72,255",
|
||
"rgba(255,101,3",
|
||
"rgba(3,255,155",
|
||
"rgba(218,255,3",
|
||
"rgba(135,3,255",
|
||
"rgba(107,146,168",
|
||
"rgba(7,230,163",
|
||
"rgba(52,162,191",
|
||
"rgba(147,112,219",
|
||
"rgba(100,149,237",
|
||
"rgba(72,209,204",
|
||
"rgba(152,251,152",
|
||
"rgba(255,99,71",
|
||
"rgba(188,143,143",
|
||
"rgba(105,105,105",
|
||
"rgba(210,105,30",
|
||
"rgba(255,165,0",
|
||
"rgba(189,183,107",
|
||
"rgba(124,252,0",
|
||
"rgba(0,255,127",
|
||
"rgba(0,139,139",
|
||
"rgba(0,191,255",
|
||
"rgba(225,255,255",
|
||
"rgba(112,128,144",
|
||
"rgba(176,196,222",
|
||
"rgba(123,104,238",
|
||
"rgba(153,50,204",
|
||
"rgba(255,0,255",
|
||
"rgba(255,105,180",
|
||
];
|
||
|
||
// 图表option整理
|
||
let lineY = [];
|
||
var yData = [];
|
||
for (var i = 0; i < charts.cityList.length; i++) {
|
||
yData.push(top10CityData[i] + "个");
|
||
var EchartsData = {
|
||
name: charts.cityList[i],
|
||
color: color[i] + ")",
|
||
value: top10CityData[i],
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
1,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: color[i] + ", 0.3)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[i] + ", 1)",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
barBorderRadius: 10,
|
||
},
|
||
emphasis: {
|
||
shadowBlur: 15,
|
||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||
},
|
||
},
|
||
};
|
||
lineY.push(EchartsData);
|
||
}
|
||
let maxValue = 0;
|
||
|
||
for (const item of lineY) {
|
||
if (item.value > maxValue) {
|
||
maxValue = item.value;
|
||
}
|
||
}
|
||
|
||
var option = {
|
||
// backgroundColor: '#000',
|
||
title: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
showContent: true,
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(8,36,68,.7)",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
color: "#00ffff",
|
||
textStyle: {
|
||
color: "#00ffff",
|
||
},
|
||
// formatter: function (params) {
|
||
// for (var i = 0; i < params.length; i++) {
|
||
// if (params[i].name !== "") {
|
||
// str += params[i].name +":" +
|
||
// params[i].value +
|
||
// "<br/>";
|
||
// }
|
||
// }
|
||
// return str;
|
||
// },
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
top: "10px",
|
||
left: "30px",
|
||
right: "35px",
|
||
bottom: "15px",
|
||
},
|
||
color: color,
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
show: true,
|
||
// 设置组件控制的y轴
|
||
yAxisIndex: [0, 1],
|
||
left: 5,
|
||
// top: 60,
|
||
// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
|
||
// 也可以用 startValue设置起始值
|
||
start: 0,
|
||
end: lineY.length < 10 ? 100 : 50, //默认为100
|
||
width: 6,
|
||
// height: 450,
|
||
// 组件的背景颜色
|
||
// left: 600, //左边的距离
|
||
// right: 8,//右边的距离
|
||
borderRadius: 5,
|
||
// borderColor: "rgba(43,48,67,0.8)",
|
||
// fillerColor: '#ccc',//滑动块的颜色
|
||
// backgroundColor: '#33384b',//两边未选中的滑动条片区的颜色
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 控制手柄的尺寸
|
||
handleSize: 12,
|
||
// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
|
||
showDataShadow: false,
|
||
},
|
||
{
|
||
type: "inside",
|
||
yAxisIndex: [0, 1],
|
||
start: 1,
|
||
// end: 36,
|
||
// 不按任何功能键，鼠标滚轮能触发缩放
|
||
// zoomOnMouseWheel: false,
|
||
// 不按任何功能键，鼠标移动能触发数据窗口平移
|
||
// moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
inverse: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 3,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
inside: false,
|
||
},
|
||
data: top10CityList,
|
||
},
|
||
{
|
||
name: "单位:个",
|
||
type: "category",
|
||
inverse: true,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
inside: false,
|
||
textStyle: {
|
||
color: "#03E9FF",
|
||
fontSize: "10",
|
||
fontFamily: "PingFangSC-Regular",
|
||
},
|
||
// formatter: function (val) {
|
||
// return `${val}个`;
|
||
// },
|
||
},
|
||
data: yData,
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
xAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
max: maxValue + 30,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
textStyle: {
|
||
fontSize: "10",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "bar",
|
||
// zlevel: 2,
|
||
barMaxWidth: 20,
|
||
barGap: `10%`,
|
||
data: lineY,
|
||
animationDuration: 1500,
|
||
label: {
|
||
normal: {
|
||
color: "#03FDFF",
|
||
show: true,
|
||
position: "right",
|
||
textStyle: {
|
||
fontSize: "0.9rem",
|
||
},
|
||
formatter: function (a, b) {
|
||
return a.name;
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
animationEasing: "cubicOut",
|
||
};
|
||
|
||
option && _this.myChart2.setOption(option, true);
|
||
//window.echartsArr.push(myChart2);
|
||
setTimeout(function () {
|
||
_this.myChart2.resize();
|
||
}, 0);
|
||
if (lineY.length >= 10) {
|
||
_this.time2 = setInterval(() => {
|
||
if (option.dataZoom[0].end == 50) {
|
||
option.dataZoom[0].end = 100;
|
||
option.dataZoom[0].start = 50;
|
||
} else if (option.dataZoom[0].end == 100) {
|
||
option.dataZoom[0].end = 50;
|
||
option.dataZoom[0].start = 0;
|
||
}
|
||
// else if (option.dataZoom[0].end == 75) {
|
||
// option.dataZoom[0].end = 100;
|
||
// option.dataZoom[0].start = 75;
|
||
// } else if (option.dataZoom[0].end == 100) {
|
||
// option.dataZoom[0].end = 25;
|
||
// option.dataZoom[0].start = 0;
|
||
// }
|
||
_this.myChart2.setOption(option);
|
||
//window.echartsArr.push(_this.myChart2);
|
||
}, 8000);
|
||
}
|
||
},
|
||
},
|
||
|
||
computed: {},
|
||
|
||
watch: {},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url("../../center/css/home.less");
|
||
|
||
// @import url("../center/css/change.less");
|
||
@font-face {
|
||
font-family: sszh;
|
||
src: url("../../center/fonts/sszh.ttf");
|
||
/* IE9+ */
|
||
}
|
||
|
||
.MonitoringPointScale {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.boxT {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 8%;
|
||
font-family: "\5FAE\8F6F\96C5\9ED1";
|
||
font-size: 0.85rem;
|
||
line-height: 8%;
|
||
// background-color: #29707f;
|
||
letter-spacing: 1px;
|
||
color: #07d8fd;
|
||
cursor: pointer;
|
||
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
|
||
|
||
.imgicon {
|
||
height: 100%;
|
||
padding: 0 1.5%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.divSpan {
|
||
padding-left: 5%;
|
||
font-size: 0.85rem;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.boxB {
|
||
position: relative;
|
||
height: 92%;
|
||
// background-color: rgb(41, 16, 16);
|
||
}
|
||
|
||
.boxnum {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 100000000;
|
||
}
|
||
|
||
.zong_title {
|
||
text-align: center;
|
||
}
|
||
|
||
.zong_num {
|
||
font-family: electricFont;
|
||
color: rgb(0, 238, 255);
|
||
text-align: center;
|
||
}
|
||
|
||
.add_title {
|
||
color: rgb(0, 238, 255);
|
||
text-align: center;
|
||
}
|
||
|
||
.add_num {
|
||
font-family: electricFont;
|
||
color: #00ff7f;
|
||
text-align: center;
|
||
}
|
||
|
||
.zong {
|
||
margin-top: 5px;
|
||
border: 1px solid yellow;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.add {
|
||
margin-top: 5px;
|
||
border: 1px solid rgb(0, 238, 255);
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
</style>
|