设计呀,你是真会给前端找事呀!!!

背景

  • 设计:我想要的你听明白了吗,你做出来的和我想要的差距很大,你怎么没有一点审美(你个臭男人,你怎么不按我画的做)!
  • :啊?这样自适应不是很好吗,适配了大部分机型呀,而且不会有啥显示的兼容性,避免不必要的客户咨询和客户投诉。
  • 设计: 你上一家公司就是因为有你这样的优秀员工才倒闭的吧?!
  • :啊?ntm和产品是一家的是吗?

我该如何应对

先看我实现的

在看看设计想要的

总结一下:

  • 1.一个的时候宽度固定,不管屏幕多大都占屏幕的一半。
  • 2.俩个的时候,各占屏幕的一半,当屏幕过小的时候两个并排展示换行。
  • 3.三个的时候,上面俩,下面一个,且宽度要一样。
  • 4.大于三个的时候,以此类推。

有句话叫做什么,乍一看很合理,细想一下,这不是扯淡么。

所以我又和设计进行了亲切的对话

  • :两个的时候你能考虑到小屏的问题,那一个和三个的时候你为啥不考虑,难道你脑袋有泡,在想一个和三个的时候泡刚好堵住了?
  • 设计: 你天天屌不拉几的,我就要这样,这样好看,你懂个毛的设计,你知道什么是美感和人体工学设计,视觉效果拉满吗?
  • :啊?我的姑奶奶耶,你是不是和产品一个学校毕业的,咋就一根筋呢?
  • 产品:ui说的对,我听ui的。汪汪汪(🐶)

当时那个画面就像是,就像是:

而我就像是

那咋办,写呗,我能咋办?

我月黑风夜, 黑衣傍我身, 潜入尔等房, 打你小屁屁?

代码实现

js 复制代码
   <el-radio-group
      class={[
      'group-even-number' : this.evenNumber,
      'group-odd-number' : this.oddNumber,
      'themeSelectBtnBg'
      ]}
      value={this.currentValue}
      onInput={(value: any) => {
        this.click(value)
      }}
    >
      ...
    </el-radio-group>
js 复制代码
   .themeSelectBtnBg {
       display: flex;
       &:nth-child(2n - 1) {
         margin-left: 0;
         margin-right: 10px;
       }
       &:nth-child(2n) {
         margin-left: 0;
         margin-right: 0;
       }
       
   }
   // 奇数的情况,宽度动态计算,将元素挤下去
   .group-odd-number {
    // 需要减去padding的宽度
    width: calc(50% - 7.5px);
   }
   
   .group-even-number {
     justify-content: space-between;
     @media screen and (max-width:360px) {
        justify-content: unset;
        margin-right: unset;
        flex: 1;
        flex-wrap: wrap;
      }
   }

行吧,咱就这样吧

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js