欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-14 13:57:37
...

【前端开发日常记录】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;
}