【前端开发日常记录】002.设计一个固定在页面上的提示框

功能及缺陷描述

• 贴在页面右侧
• 缺陷提醒：zIndex、不支持点击隐藏（以后优化，比如点击折叠成一个问号贴在页面旁边避免占位置，部分强迫症要气死）、形状做的尽力了

部分技术点总结

在HTML中实现两个div并排显示

• （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;
}