vue+rem custom carousel effect

<template>
    <div class="constructionUp">
        <div class="pub-hd">
            <h2>Construction Upgrade Package</h2>
            <h3>Additional Services</h3>
        </div>
        <div id="activityDiv">
            <ul num="0" id="activityUl">
               <li class="activityLi" v-for="(v,i) in listData" :key="i" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                    <img src="static/imgs/package/bitmap.jpg">
                    <div class="liText">
                        <p class="liTtitle">{{v.lititle}}</p>
                        <p class="liDes">1. After the start of construction, the customer, designer and project manager will conduct on-site briefing. If there are personalized project changes, the normal customer change procedures will be followed (refer to: Customer Change Notice);</p>
                        <p class="liDes">2. After the briefing, if the customer requires changes to the personalized project for some reason, in addition to bearing the cost of the personalized project, the additional transfer fee must also be paid. </p>
                         <p class="liPrice">
                            <span class="title1">Theme package price:￥</span>
                            <span class="title2">4500</span>
                            <span class="title3">Yuan</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="pointerDiv">
                <span :class="[currantIndex ===0 ? 'active' : '', 'pointer']"></span>
                <span :class="[currantIndex ===1 ? 'active' : '', 'pointer']"></span>
                <span :class="[currantIndex ===2 ? 'active' : '', 'pointer']"></span>
            </div>
        </div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            listData: [{lititle: 'Old house renovation'}, {lititle: 'Old house renovation 2'}, {lititle: 'Old house renovation 3'}],
            liWidth: 0,
            liNum: 0,
            startX: 0,
            endX: 0,
            currantIndex: 0,
            test: false
 
        }
    },
    mounted () {
        this.initUlWidth()
    },
    methods: {
        initUlWidth () { // Initialize the width of ul let pit = document.documentElement.clientWidth / 750 // The ratio of the current mobile phone screen to the 750 screen let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth // The width of a single li let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight'] // Get a single marginRight, with px
            let marginNum = parseInt(marginR.replace('px', ''))
            this.liWidth = oldWidth + marginNum // single width + maringRight
            let liCount = parseInt(document.getElementsByClassName('activityLi').length)// Number of li this.liNum = liCount
            let ULpx = oldWidth * liCount + (liCount - 1) * marginNum // The last margin is not counted document.getElementById('activityUl').style.width = ULpx / pit + 'px' // Divide by the ratio to make the current div width the same as 2 times the design ratio, set the length of ul, and the last margin is not counted },
        touchStart (e) {
            // Record the initial position e.preventDefault() // Prevent default events, scrolling, etc. this.startX = e.touches[0].clientX // Record the position where the sliding starts },
        touchEnd (e) {
            e.preventDefault() // Prevent default events // Record end position this.endX = e.changedTouches[0].clientX
            // Swipe left if (this.startX - this.endX > 30) {
                console.log('Swipe left')
                if (this.currantIndex >= this.liNum - 1) {
                    // No operation } else {
                    this.currantIndex++
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            // Swipe right if (this.startX - this.endX < -30) {
                if (this.currantIndex === 0) {
                    // No operation } else {
                    this.currantIndex--
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            this.startX = 0
            this.endX = 0
        }
 
    }
}
</script>
 
<style lang="less" scoped>
    @import "~less/base.less";
    .constructionUp{
        width: 100%;
        .pub-hd{
            padding: 0.8rem 0 0.6rem 0;
            text-align: center;
            background-color: #ffffff;
            h2{
                font-size: 0.32rem;
                color: #606771;
            }
            h3{
                margin-top: 0.26rem;
                font-size: 0.24rem;
                color: #b9bec4;
            }
        }
        #activityDiv{
            padding-left: 0.4rem;
            background-color: #ffffff;
            overflow: hidden;
            #activityUl{
                position: relative;
                left: 0;
                height: 8.06rem;
                transition:all .35s ease-in-out;
                background-color: #ffffff;
                .activityLi{
                    float: left;
                    width: 6.7rem;
                    height: 8.06rem;
                    &:not(:last-child){
                        margin-right: 0.3rem;
                    }
                    box-shadow: 0 5px 25px 0 rgba(0,0,0,.4);
                    img{
                        width: 100%;
                        height: 3.6rem;
                    }
                    .liText{
                        padding: 0 0.4rem;
                        text-align: left;
                        .liTtitle{
                            padding: 0.48rem 0 0.36rem 0;
                            font-size: 0.34rem;
                            color: #000000;
                        }
                        .liDes{
                            font-size: 0.2rem;
                            color:#b5b5b5;
                        }
                    }
                    .liPrice{
                        height: 0.28rem;
                        line-height: 0.28rem;
                        color: @c-main; //Just change the color vertical-align: bottom;
                        margin-top: 0.8rem;
                        .title1{
                            display: inline-block;
                            font-size: 0.22rem;
                        }
                         .title2{
                              display: inline-block;
                              font-size: 0.35rem;
                        }
                         .title3{
                              display: inline-block;
                              font-size: 0.22rem;
                        }
                    }
                }
            }
             .pointerDiv{
                width: 100%;
                height: 1.54rem;
                background-color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                .pointer{
                    display: inline-block;
                    width: 0.16rem;
                    height: 0.16rem;
                    background-color: #cccccc;
                    border-radius: 100%;
                    &:nth-child(2){
                        margin:0 0.4rem;
                    }
                    &.active{
                        background-color: @c-main;
                    }
                }
            }
        }
    }
</style>