這兩天碰到一個問題，就是一個小圖示的大小和定位的位置在不同的作業系統下是不一樣的。

查了下資料，自己解決出來了，整理如下：

html：

<i :class="['cursor-pointer', {'windows' : windows}, {'mac': mac}]" 
　　　　@click="openProductDetail(scope.row.replaceProducts[0].replaceProductId)"
       v-if="scope.row.replaceProducts && scope.row.replaceProducts.length > 0">替代物料
</i>

　js如下：

export default {
    data() {
         return {
           windows: false,
           mac: false 
         };
     },
　　
　　 created ( ) {
       this.init( );
    },
 
　　methods: {
       init ( ) {
           if (navigator.userAgent.indexOf('Mac OS') !== -1) {
               this.mac = true;
           } else {
               this.windows = true;
           }
       }
　　},
 
}

　　css程式碼部分如下：

 // 當在windows系統下的替代物料位置
    .el-table .cell i {
        font-style: normal;
        display: inline-block;
        padding: 0 .03rem 0 .20rem;
        position: absolute;
        background: url('~@/assets/ac-b2bpc/images/replace.png') no-repeat;
        // background-size: 1.4rem .70rem;
        background-size: .71rem .30rem;
        background-size: cover;
        font-size: .06rem;
        top: .09rem;
        right: -.18rem;
        z-index: 10;
        color: #fff;
    }
    // 當在windows系統下的替代物料位置，上面的就是預設是w
    // .el-table .cell .windows{
    // }

    // 當在mac系統下的替代物料的位置
    .el-table .cell .mac{
      color: blue;
    }