设计呀，你是真会给前端找事呀！！！

顾昂_2023-11-22 21:24

背景

设计：我想要的你听明白了吗，你做出来的和我想要的差距很大，你怎么没有一点审美（你个臭男人，你怎么不按我画的做）！
我：啊？这样自适应不是很好吗，适配了大部分机型呀，而且不会有啥显示的兼容性，避免不必要的客户咨询和客户投诉。
设计：你上一家公司就是因为有你这样的优秀员工才倒闭的吧？！
我：啊？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;
      }
   }

行吧，咱就这样吧