【前端开发日常记录】002.设计一个固定在页面上的提示框
程序员文章站
2022-05-14 13:57:37
...
功能及缺陷描述
- 贴在页面右侧
- 缺陷提醒:zIndex、不支持点击隐藏(以后优化,比如点击折叠成一个问号贴在页面旁边避免占位置,部分强迫症要气死)、形状做的尽力了
部分技术点总结
-
(1)设置为行内样式,display:inline-block
-
(2)设置float浮动
-
(3)设置position定位属性为absolute
border-radius:从左上顺时针切割
antd的Affix组件可实现固定
代码
<Affix
offsetTop={400}
// onChange={(affixed) => console.log(affixed) }
onClick={() => window.open("xxx")}
style={{ width:200, position: 'absolute', top: 250, right: 0, zIndex: 100}}>
<div className={styles["affix-container"]}>
<div style={{display:"inline-block", marginLeft:10, fontSize:70, fontWeight:"bold", color:"#6782ff"}}>
?
</div>
<div style={{display:"inline-block", marginLeft:8, fontSize:12, fontWeight:"bold"}}>
<p style={{marginBottom:3}}>遇到问题了吗?</p>
<p style={{marginBottom:3}}>不知道该如何填写?</p>
<p style={{marginBottom:3}}>{'<<<'}请点击</p>
</div>
</div>
</Affix>
.affix-container {
// border: 1px solid #6782ff;
border-radius: 20px 65px 65px 20px;
background-color: #f0f5ff;
}