vue+ant 多语言切换实现单独小范围修改样式_

ant

className={!getLang().ISZHCN ? styles.english : ''}

className={`${styles.swiper_item} ${styles[getLang().lang]}`}

className={`${styles.textMedium} ${!getLang().ISZHCN ? styles.english : ''}`}

<div className={`${styles.logo} ${!getLang().ISZHCN ? styles.english : ''}`}>
    <img src={require(`@/img/${lang}/logo.png`)} alt="" className={styles.logo} />
</div>

 .logo {
    width: 130px;
    &.english {
      width: 170px;
    }
  }

VUE

 :class="{'english':!$ISZHCN}"

<ul :class="{'english':!$ISZHCN}"></ul>

ul {
      display: grid;
      grid-template-columns: 24% 24% 24% 24%;
      grid-gap: 20px 20px;
      margin-bottom: 30px;
      &.english{
        grid-template-columns: 32% 32% 32%;
      }
</ul>