Commit b08794ad authored by xinzhedeai's avatar xinzhedeai

fix: 样式优化,字体调整

parent 4be95e7d
...@@ -55,8 +55,8 @@ export default { ...@@ -55,8 +55,8 @@ export default {
}).then((response) => { }).then((response) => {
this.chartData = response.data; this.chartData = response.data;
this.$nextTick(() => { this.$nextTick(() => {
this.initCharts(); this.initCharts();
}) });
}); });
}, },
getListData(type) { getListData(type) {
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
option = { option = {
legend: { legend: {
top: 25, top: 25,
right: '2%', // 靠右 right: "8%", // 靠右
icon: "rect", // 设置为圆形图标 icon: "rect", // 设置为圆形图标
itemWidth: 10, // 图标宽度 itemWidth: 10, // 图标宽度
itemHeight: 10, // 图标高度 itemHeight: 10, // 图标高度
...@@ -89,27 +89,27 @@ export default { ...@@ -89,27 +89,27 @@ export default {
align: "left", align: "left",
textStyle: { textStyle: {
color: "#fff", // 设置字体颜色 color: "#fff", // 设置字体颜色
fontSize: 14, // 设置字体大小 fontSize: "0.16rem", // 设置字体大小
}, },
itemStyle: { itemStyle: {
color: "#1f8fff", color: "#1f8fff",
}, },
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'cross', type: "cross",
label: { label: {
backgroundColor: '#6a7985' backgroundColor: "#6a7985",
} },
} },
}, },
toolbox: {}, toolbox: {},
grid: { grid: {
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "3%", bottom: "3%",
right: '8%', right: "8%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
...@@ -152,24 +152,28 @@ export default { ...@@ -152,24 +152,28 @@ export default {
], ],
}; };
option.xAxis[0].data = this.chartData.xaxis; option.xAxis[0].data = this.chartData.xaxis;
option.series = this.chartData.series.map((item)=>{ option.series = this.chartData.series.map((item) => {
return { return {
name: item.name, name: item.name,
type: "line", type: "line",
stack: "Total", stack: "Total",
lineStyle: { lineStyle: {
color: "#1f8fff", color: "#1f8fff",
}, },
areaStyle: { areaStyle: {
color: "#1e84e8", color: "#1e84e8",
}, },
emphasis: { emphasis: {
focus: "series", focus: "series",
}, },
data: item.data, data: item.data,
} };
}); });
myChart.setOption(option); myChart.setOption(option);
// 窗口大小变化时重新调整图表布局
window.addEventListener("resize", function () {
myChart.resize(); // 调用resize方法
});
}, },
}, },
}; };
...@@ -229,11 +233,12 @@ export default { ...@@ -229,11 +233,12 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-family: "diget year"; font-family: "diget year";
font-size: 0.26rem; font-size: 0.36rem;
text-shadow: 0px 3px 12px rgba(24, 153, 159, 0.82); text-shadow: 0px 3px 12px rgba(24, 153, 159, 0.82);
background: linear-gradient(180deg, #ffffff 0%, #00ffc6 100%); background: linear-gradient(180deg, #ffffff 0%, #00ffc6 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
color: #fff;
} }
} }
> div:nth-child(2) { > div:nth-child(2) {
...@@ -377,7 +382,7 @@ export default { ...@@ -377,7 +382,7 @@ export default {
height: 100%; height: 100%;
line-height: 0.48rem; line-height: 0.48rem;
margin: 0; margin: 0;
font-size: 0.22rem; font-size: 0.2rem;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
padding-left: 0.4rem; padding-left: 0.4rem;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
......
...@@ -185,7 +185,7 @@ export default { ...@@ -185,7 +185,7 @@ export default {
height: 100%; height: 100%;
line-height: 0.48rem; line-height: 0.48rem;
margin: 0; margin: 0;
font-size: 0.22rem; font-size: 0.2rem;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
padding-left: 0.4rem; padding-left: 0.4rem;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
...@@ -232,7 +232,7 @@ export default { ...@@ -232,7 +232,7 @@ export default {
span:nth-child(1) { span:nth-child(1) {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.22rem; font-size: 0.18rem;
// color: #ffffff; // color: #ffffff;
margin-right: 0.3rem; margin-right: 0.3rem;
} }
...@@ -302,7 +302,7 @@ export default { ...@@ -302,7 +302,7 @@ export default {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.18rem; font-size: 0.17rem;
text-align: center; text-align: center;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
v-for="(item, index) in dataList" v-for="(item, index) in dataList"
:key="index" :key="index"
> >
<span style="color:#fff;">{{ item.monName }}</span> <span style="color:#fff;" class="ellipsis">{{ item.monName }}</span>
<span :style="{ color: colorBlock[index] }">{{ <span :style="{ color: colorBlock[index] }">{{
item.monDate item.monDate
}}</span> }}</span>
...@@ -269,6 +269,12 @@ export default { ...@@ -269,6 +269,12 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.ellipsis {
width: 90%; /* 设置容器宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 当文本溢出容器时显示省略号 */
}
.emptyData { .emptyData {
font-size: 0.18rem; font-size: 0.18rem;
text-align: center; text-align: center;
...@@ -339,7 +345,7 @@ export default { ...@@ -339,7 +345,7 @@ export default {
height: 100%; height: 100%;
line-height: 0.48rem; line-height: 0.48rem;
margin: 0; margin: 0;
font-size: 0.22rem; font-size: 0.2rem;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
padding-left: 0.4rem; padding-left: 0.4rem;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
:key="index" :key="index"
class="suidao-item" class="suidao-item"
> >
<span class="ellipsis">{{ item.monName }}时间框里东方红路水电费收快递费就</span> <span class="ellipsis">{{ item.monName }}</span>
<span>{{ item.monDate }}</span> <span>{{ item.monDate }}</span>
<span>{{ item.monNumber }}</span> <span>{{ item.monNumber }}</span>
</dd> </dd>
...@@ -97,6 +97,12 @@ export default { ...@@ -97,6 +97,12 @@ export default {
const content = document.querySelector(contentClass); const content = document.querySelector(contentClass);
var affixHeight = 10; var affixHeight = 10;
if(this.dataList.length<5){
content.style.transform = `translateY(0px)`;
clearInterval(this["interval4" + type]);
return
}
if (this["interval4" + type]) { if (this["interval4" + type]) {
clearInterval(this["interval4" + type]); clearInterval(this["interval4" + type]);
} }
...@@ -160,7 +166,7 @@ export default { ...@@ -160,7 +166,7 @@ export default {
height: 100%; height: 100%;
line-height: 0.48rem; line-height: 0.48rem;
margin: 0; margin: 0;
font-size: 0.22rem; font-size: 0.2rem;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
padding-left: 0.4rem; padding-left: 0.4rem;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
...@@ -191,7 +197,7 @@ export default { ...@@ -191,7 +197,7 @@ export default {
display: grid; display: grid;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.18rem; font-size: 0.17rem;
text-align: right; text-align: right;
grid-template-columns: 1.4rem 1.8rem 1rem; grid-template-columns: 1.4rem 1.8rem 1rem;
......
...@@ -304,12 +304,14 @@ footer{ ...@@ -304,12 +304,14 @@ footer{
display: flex; display: flex;
justify-content: start; justify-content: start;
gap: 0.02rem; gap: 0.02rem;
padding-top: 0.2rem; padding-top: 0.1rem;
align-items: center; padding-left: 1.3rem;
align-items: start;
flex-direction: column; flex-direction: column;
background: pink; background: pink;
background: url("../assets/images/dpNew3/icon5.png"); background: url("../assets/images/dpNew3/icon5.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: 0.5rem;
span{ span{
font-size: 0.16rem; font-size: 0.16rem;
color: #fff; color: #fff;
...@@ -380,7 +382,7 @@ footer{ ...@@ -380,7 +382,7 @@ footer{
height: 0.5rem; height: 0.5rem;
font-size: 0.22rem; font-size: 0.22rem;
font-weight: bold; font-weight: bold;
color: #26d4ff; color: #fff;
background-image: url("../assets/images/bigscreen/button_normal.png"); background-image: url("../assets/images/bigscreen/button_normal.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment