1.根据条件或者状态值改变样式属性值
//循环内的值
<div className="tableright-content-div">
{
ele.Plantinginfo.map((ele, index) => {
return (
<div key={
index} className="tableright-content">
<div style={
{
paddingTop: `${
Number(index)==0 ? '15px' : '0px'}`, paddingLeft: '15px' }}>
//状态值
<div className="monitor-right-topdiv" style={
{
margin: `${
airQualitysize == 4 ? '29px 0 0 20px':'29px 0 0 45px'}` }}>
2.antd组件中的页面tabs展示
//tab页
const panel = (
<div className="panel1">
<ReactEcharts
option={
option}
style={
{
height: '400px',
left: '-80px',
width: '1640px',
position: 'relative'
}}
/>
</div>
);
<Tabs
defaultActiveKey="1"
type="card"
tabBarExtraContent={
operations}
onTabClick={
onTabClick}
items={
items.map((ele, index) => {
return {
label: ele.Lable,
key: ele.Key,
children: panel
};
})}
/>
3.DIV阴影边界,立体感
理解:https://juejin.cn/post/6854573222483099656
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
.tableright-content-div {
position: relative;
border-radius: 4px;
margin-bottom: 38px;
box-shadow: inset 2px 0px 1px 0.1px rgba(63, 217, 163, 1);
background-color: rgba(255, 255, 255, 1);
width: 330px;
height: 260px;
}
一个网站提供好demo直接用:
https://getcssscan.com/css-box-shadow-examples?ref=producthunt
4.图片显示比例4:3
<Image className="tableft-content-zoomImage" src={
ele.FarmImage} />
.tableft-content-zoomImage{
top:0;
left:0;
width:100%;
height:60%;
//padding-bottom: 75%;
overflow:hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}
5.img图片显示在div中间
<div className="map-restore" onClick={
restoreMap}>
<img src={
currentPoint}></img>
</div>
.map-restore {
position: fixed;
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
width: 32px;
height: 32px;
background: rgba(#000, 0.8);
background-size: 32px 32px;
border-radius: 4px;
right: 50px;
bottom: 100px;
cursor: pointer;
}
未完待续…