无法直接复制用，给自己记忆用的

img2.png

<div class="ten">
    <div class="ten-con">
                    <div class="ten-box" id="ten-box"
                    :style="tenBox ? 'transform: translate3d(-' + tenBoxWidth + 'rem, 0, 0)!important;' : 'transform: translate3d(0, 0, 0)!important;'">
                        <div class="ten-item" :class="item.checked ? 'ten-item-checked' : ''" 
                        @click="checkedItem(item)"
                        v-for="(item, index) in tenList" :key="index">
                           内容
                        </div>
                    </div>
                </div>
                <div class="left-icon" @click="nextTenBox('l')" v-show="tenBox">
                    <el-icon><ArrowLeftBold /></el-icon>
                </div>
                <div class="right-icon" @click="nextTenBox('r')" v-show="!tenBox">
                    <el-icon><ArrowRightBold /></el-icon>
                </div>
            </div>

const tenBox = ref(false);
    const tenBoxWidth = ref()
    const nextTenBox = (type:any) => {
        if(type == 'r'){
            let width = document.querySelector('.ten-box')?.clientWidth;
            tenList.value.forEach((item:any, index:any) => {
                if(item.checked === true && index <= 4){
                    tenBoxWidth.value = width / 80 / 6 * 5;
                }
            });
            tenBox.value = true
        }else{
            tenBox.value = false
        }
    }