@@ -8,7 +8,7 @@ | |||||
} | } | ||||
.item{ | .item{ | ||||
display: inline-block; | display: inline-block; | ||||
margin-right: 30px; | |||||
margin-right:45px; | |||||
font-size: 11px; | font-size: 11px; | ||||
position: relative; | position: relative; | ||||
color: #DFF1FE; | color: #DFF1FE; | ||||
@@ -8,7 +8,7 @@ | |||||
} | } | ||||
.item{ | .item{ | ||||
display: inline-block; | display: inline-block; | ||||
margin-right: 30px; | |||||
margin-right: 45px; | |||||
font-size: 11px; | font-size: 11px; | ||||
position: relative; | position: relative; | ||||
color: #DFF1FE; | color: #DFF1FE; | ||||
@@ -1,7 +1,7 @@ | |||||
/* | /* | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-08-23 14:44:30 | * @Date: 2024-08-23 14:44:30 | ||||
* @LastEditTime: 2024-08-30 17:30:51 | |||||
* @LastEditTime: 2024-09-02 08:29:07 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
*/ | */ | ||||
@@ -8,7 +8,7 @@ | |||||
} | } | ||||
.item{ | .item{ | ||||
display: inline-block; | display: inline-block; | ||||
margin-right: 30px; | |||||
margin-right: 45px; | |||||
font-size: 11px; | font-size: 11px; | ||||
position: relative; | position: relative; | ||||
color: #DFF1FE; | color: #DFF1FE; | ||||
@@ -1,7 +1,7 @@ | |||||
/* | /* | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-08-22 14:00:57 | * @Date: 2024-08-22 14:00:57 | ||||
* @LastEditTime: 2024-08-30 13:55:33 | |||||
* @LastEditTime: 2024-09-02 09:50:49 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
*/ | */ | ||||
@@ -82,7 +82,7 @@ function InputDataToggle() { | |||||
cls.content | cls.content | ||||
}> | }> | ||||
<h2 className={ | <h2 className={ | ||||
cls.totalDataTitle | |||||
cls.gasTitle | |||||
}> | }> | ||||
焦炉煤气设定总量 | 焦炉煤气设定总量 | ||||
</h2> | </h2> | ||||
@@ -104,7 +104,7 @@ function InputDataToggle() { | |||||
cls.content | cls.content | ||||
}> | }> | ||||
<h2 className={ | <h2 className={ | ||||
cls.paramsTitle | |||||
cls.windTitle | |||||
}> | }> | ||||
助燃风流量 | 助燃风流量 | ||||
</h2> | </h2> | ||||
@@ -133,7 +133,7 @@ function InputDataToggle() { | |||||
cls.content | cls.content | ||||
}> | }> | ||||
<h2 className={ | <h2 className={ | ||||
cls.totalDataTitle | |||||
cls.productTitle | |||||
}> | }> | ||||
产品规格设定标准 | 产品规格设定标准 | ||||
</h2> | </h2> | ||||
@@ -155,7 +155,7 @@ function InputDataToggle() { | |||||
cls.content | cls.content | ||||
}> | }> | ||||
<h2 className={ | <h2 className={ | ||||
cls.paramsTitle | |||||
cls.waterTitle | |||||
}> | }> | ||||
循环水流量 | 循环水流量 | ||||
</h2> | </h2> | ||||
@@ -184,7 +184,7 @@ function InputDataToggle() { | |||||
cls.content | cls.content | ||||
}> | }> | ||||
<h2 className={ | <h2 className={ | ||||
cls.totalDataTitle | |||||
cls.peiWaterTitle | |||||
}> | }> | ||||
配料水分含量 | 配料水分含量 | ||||
</h2> | </h2> | ||||
@@ -206,7 +206,7 @@ function InputDataToggle() { | |||||
cls.content | cls.content | ||||
}> | }> | ||||
<h2 className={ | <h2 className={ | ||||
cls.paramsTitle | |||||
cls.outputTitle | |||||
}> | }> | ||||
玻璃液出口宽度 | 玻璃液出口宽度 | ||||
</h2> | </h2> | ||||
@@ -23,7 +23,7 @@ | |||||
padding:5px 10px; | padding:5px 10px; | ||||
font-size: 32px; | font-size: 32px; | ||||
line-height: 48px; | line-height: 48px; | ||||
letter-spacing: 6px; | |||||
letter-spacing: 2px; | |||||
background: url(../../../../../assets/paramsData.png) no-repeat; | background: url(../../../../../assets/paramsData.png) no-repeat; | ||||
background-size: 100% 90%; | background-size: 100% 90%; | ||||
background-position: bottom; | background-position: bottom; | ||||
@@ -82,7 +82,7 @@ | |||||
backdrop-filter: blur(0px); | backdrop-filter: blur(0px); | ||||
} | } | ||||
.outTitle{ | |||||
.outputTitle{ | |||||
flex: 1; | flex: 1; | ||||
height: 56px; | height: 56px; | ||||
position: relative; | position: relative; | ||||
@@ -94,7 +94,7 @@ | |||||
letter-spacing: 1px; | letter-spacing: 1px; | ||||
text-align: right; | text-align: right; | ||||
} | } | ||||
.outTitle::after { | |||||
.outputTitle::after { | |||||
content: ""; | content: ""; | ||||
top: 73%; | top: 73%; | ||||
position: absolute; | position: absolute; | ||||
@@ -106,3 +106,123 @@ | |||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | ||||
backdrop-filter: blur(0px); | backdrop-filter: blur(0px); | ||||
} | } | ||||
.productTitle{ | |||||
flex: 1; | |||||
height: 56px; | |||||
position: relative; | |||||
font-family: PingFangSC, PingFang SC; | |||||
font-weight: 400; | |||||
font-size: 24px; | |||||
color: #FFFFFF; | |||||
line-height: 56px; | |||||
letter-spacing: 1px; | |||||
text-align: right; | |||||
} | |||||
.productTitle::after { | |||||
content: ""; | |||||
top: 73%; | |||||
position: absolute; | |||||
bottom: 0; | |||||
left: 14%; | |||||
width: 85%; /* 调整此处的宽度值来改变下划线的宽度,例如 50% 表示占文字宽度的一半 */ | |||||
height: 4px; /* 调整下划线的高度 */ | |||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); | |||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | |||||
backdrop-filter: blur(0px); | |||||
} | |||||
.waterTitle{ | |||||
flex: 1; | |||||
height: 56px; | |||||
position: relative; | |||||
font-family: PingFangSC, PingFang SC; | |||||
font-weight: 400; | |||||
font-size: 24px; | |||||
color: #FFFFFF; | |||||
line-height: 56px; | |||||
letter-spacing: 1px; | |||||
text-align: right; | |||||
} | |||||
.waterTitle::after { | |||||
content: ""; | |||||
top: 73%; | |||||
position: absolute; | |||||
bottom: 0; | |||||
left: 40%; | |||||
width: 60%; /* 调整此处的宽度值来改变下划线的宽度,例如 50% 表示占文字宽度的一半 */ | |||||
height: 4px; /* 调整下划线的高度 */ | |||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); | |||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | |||||
backdrop-filter: blur(0px); | |||||
} | |||||
.peiWaterTitle{ | |||||
flex: 1; | |||||
height: 56px; | |||||
position: relative; | |||||
font-family: PingFangSC, PingFang SC; | |||||
font-weight: 400; | |||||
font-size: 24px; | |||||
color: #FFFFFF; | |||||
line-height: 56px; | |||||
letter-spacing: 1px; | |||||
text-align: right; | |||||
} | |||||
.peiWaterTitle::after { | |||||
content: ""; | |||||
top: 73%; | |||||
position: absolute; | |||||
bottom: 0; | |||||
left: 30%; | |||||
width: 68%; /* 调整此处的宽度值来改变下划线的宽度,例如 50% 表示占文字宽度的一半 */ | |||||
height: 4px; /* 调整下划线的高度 */ | |||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); | |||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | |||||
backdrop-filter: blur(0px); | |||||
} | |||||
.windTitle{ | |||||
flex: 1; | |||||
height: 56px; | |||||
position: relative; | |||||
font-family: PingFangSC, PingFang SC; | |||||
font-weight: 400; | |||||
font-size: 24px; | |||||
color: #FFFFFF; | |||||
line-height: 56px; | |||||
letter-spacing: 1px; | |||||
text-align: right; | |||||
} | |||||
.windTitle::after { | |||||
content: ""; | |||||
top: 73%; | |||||
position: absolute; | |||||
bottom: 0; | |||||
left: 39%; | |||||
width: 59%; /* 调整此处的宽度值来改变下划线的宽度,例如 50% 表示占文字宽度的一半 */ | |||||
height: 4px; /* 调整下划线的高度 */ | |||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); | |||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | |||||
backdrop-filter: blur(0px); | |||||
} | |||||
.gasTitle{ | |||||
flex: 1; | |||||
height: 56px; | |||||
position: relative; | |||||
font-family: PingFangSC, PingFang SC; | |||||
font-weight: 400; | |||||
font-size: 24px; | |||||
color: #FFFFFF; | |||||
line-height: 56px; | |||||
letter-spacing: 1px; | |||||
text-align: right; | |||||
} | |||||
.gasTitle::after { | |||||
content: ""; | |||||
top: 73%; | |||||
position: absolute; | |||||
bottom: 0; | |||||
left: 11%; | |||||
width: 88%; /* 调整此处的宽度值来改变下划线的宽度,例如 50% 表示占文字宽度的一半 */ | |||||
height: 4px; /* 调整下划线的高度 */ | |||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); | |||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); | |||||
backdrop-filter: blur(0px); | |||||
} |
@@ -45,6 +45,7 @@ | |||||
width: 320px; | width: 320px; | ||||
/* flex: 1; */ | /* flex: 1; */ | ||||
text-align: right; | text-align: right; | ||||
color: rgba(255, 255, 255, 1); | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -57,6 +57,7 @@ | |||||
.value { | .value { | ||||
flex: 5; | flex: 5; | ||||
text-align: left; | text-align: left; | ||||
color: rgba(255, 255, 255, 1); | |||||
} | } | ||||
} | } | ||||
.info__item { | .info__item { | ||||
@@ -104,6 +105,7 @@ | |||||
.value { | .value { | ||||
flex: 3; | flex: 3; | ||||
text-align: left; | text-align: left; | ||||
color: rgba(255, 255, 255, 1); | |||||
} | } | ||||
} | } | ||||
.info__item::before{ | .info__item::before{ | ||||
@@ -56,6 +56,7 @@ | |||||
.value { | .value { | ||||
flex: 3; | flex: 3; | ||||
text-align: left; | text-align: left; | ||||
color: rgba(255, 255, 255, 1); | |||||
} | } | ||||
} | } | ||||
.info__item::before{ | .info__item::before{ | ||||
@@ -1,7 +1,7 @@ | |||||
/* | /* | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-08-22 14:00:57 | * @Date: 2024-08-22 14:00:57 | ||||
* @LastEditTime: 2024-08-22 14:33:33 | |||||
* @LastEditTime: 2024-09-02 09:30:37 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
*/ | */ | ||||
@@ -48,7 +48,7 @@ function SeasonToggle() { | |||||
} | } | ||||
onClick={() => onSeasonUpdate(3)} | onClick={() => onSeasonUpdate(3)} | ||||
> | > | ||||
夏季 | |||||
秋季 | |||||
</div> | </div> | ||||
<div | <div | ||||
className={ | className={ | ||||
@@ -56,7 +56,7 @@ function SeasonToggle() { | |||||
} | } | ||||
onClick={() => onSeasonUpdate(4)} | onClick={() => onSeasonUpdate(4)} | ||||
> | > | ||||
夏季 | |||||
冬季 | |||||
</div> | </div> | ||||
</div> | </div> | ||||
); | ); | ||||