vue 代码样式问题

前端小芬芬

已于 2024-05-09 18:52:46 修改

阅读量262

点赞数 3

分类专栏： css 文章标签： vue.js 前端 css

于 2024-05-09 18:52:22 首次发布

本文链接：https://blog.csdn.net/yf18040578780/article/details/138626301

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

部分电脑存在样式错乱问题，部分电脑样式正常。最后发现是样式写在 el-col 里面导致的。

注意：写样式不要放在 el-row 或者 el-row ，导致部分电脑会出现莫名其妙的样式问题

<el-row class="detail">
  <el-col class="item flexColumnCenter" v-for="(item, index) in revenueItems" :key="index" :span="8">
      <div class="num">{{ item.num }}</div>
      <div class="unit">{{ item.unit }}</div>
      <img class="triangle" :src="item.triangleImageUrl" alt="" />
      <div class="imgBot">
        <img :src="item.imgSrc" alt="" />
      </div>
      <div class="label">{{ item.label }}</div>
  </el-col>
</el-row>

代码修改
<el-row class="detail">
  <el-col v-for="(item, index) in revenueItems" :key="index" :span="8">
    <div>
      <div class="num">{{ item.num }}</div>
      <div class="unit">{{ item.unit }}</div>
      <img class="triangle" :src="item.triangleImageUrl" alt="" />
      <div class="imgBot">
        <img :src="item.imgSrc" alt="" />
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </el-col>
</el-row>