移动端楼层效果

<!-- 移动端的楼层效果 -->
<template>
    <div class="liveApart">
        <div class="liveApart-top">
            <van-nav-bar title="" left-text="首页" left-arrow @click-left="onClickLeft">
                <template #right>
                    <img style="width: 20vw;height: 8.4vw;margin-left: 21.8vw;" src="" />
                </template>
            </van-nav-bar>
            <ul class="nav-ul">
                <li class="nav-List" v-for="(item, index) in navTitle" :key="index" @click="toTarget(index)">{
   
   { item.name }}
                </li>
            </ul>
        </div>
        <div class="liveApart-center">
            <div class="content-item">
                <div class="content-top flex-row">
                    <div class="line"></div>
                    <span class="info">基本</span>
                </div>
                <table border="1" cellspacing="0" cellpadding="0">
                    <tr>
                        <th>业务名称</th>
                        <td>业务名称</td>
                        <th>业务类型</th>
                        <td>业务名称</td>
                    </tr>
                    <tr>
                        <th>业务描述</th>
                        <td colspan="3">业务描述</td>
                    </tr>
                    <tr>
                        <th>业务描述</th>
                        <td>业务描述</td>
                        <th>业务描述</th>
                        <td>业务描述</td>
                    </tr>
                    <tr>
                        <th>业务描述</th>
                        <td>业务描述</td>
                        <th>业务描述</th>
                        <td>业务描述</td>
                    </tr>
                    <tr>
                        <th>业务描述</th>
                        <td colspan="3">业务描述</td>
                    </tr>
                    <tr>
                        <th>业务描述</th>
                        <td colspan="3">业务描述</td>
                    </tr>
                </table>
            </div>
            <div class="content-item">
                <div class="content-top flex-row">
                    <div class="line"></div>
                    <span class="info">条件</span>
                </div>
                <div class="basis-content" v-for="(item, index) in basisData" :key="index">
                    <div class="basis-top flex-row">
                        <img style="width: 3.74vw;height: 4.54vw;margin-top: 5.6vw;"  alt="">
                        <span class="basis-text">{
   
   { item.title }}</span>
                    </div>
                    <div class="basis-bottom justify-between">
                        <span style="margin-left:6vw;">{
   
   { item.textOne }}</span>
                        <span>{
   
   { item.textTwo }}</span>
                        <span>{
   
   { item.time }}</span>
                    </div>
                </div>

            </div>
            <div class="content-item">
                <div class="content-top flex-row">
                    <div class="line"></div>
                    <span class="info">申请</span>
                </div>
                <div class="text-conditions">
                    业务描述<br>
                    业务描述<br>
                    业务描述<br>
                    业务描述<br>
                    业务描述<br>
                    业务描述<br>
                    业务描述<br>
                    业务描述<br>
                </div>

            </div>
            <div class="content-item">
                <div class="content-top flex-row">
                    <div class="line"></div>
                    <span class="info">材料</span>
                </div>
                <div class="materials flex-row">
                    <img style="width: 4.54vw;height: 4.14vw;" src="" alt="">
                    <span>业务描述.doc</span>
                </div>
                <div class="materials flex-row">
                    <img style="width: 4.54vw;height: 4.14vw;" src="" alt="">
                    <span>业务描述...</span>
                </div>

            </div>
            <div class="content-item">
                <div class="content-top flex-row">
                    <div class="line"></div>
                    <span class="info">办理</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            element: {
                nav: [],
                content: []
            },
            navTitle: [
                { name: "基本" },
                { name: "条件" },
                { name: "申请" },
                { name: "材料" },
                { name: "办理" },
            ],
            basisData: [
                {
                    title: "补助费",
                    textOne: "【2019】84",
                    textTwo: "总组",
                    time: "2023-1-1"
                },
                {
                    title: "补助费",
                    textOne: "【2019】84",
                    textTwo: "总组",
                    time: "2023-1-1"
                }
            ],
        }
    },
    mounted() {
        const nav = document.getElementsByClassName('nav-List')
        const cont = document.getElementsByClassName('content-item')
        this.element.nav = nav
        this.element.content = cont
        //导航初始化样式（默认第一个）
        nav[0].classList.add('active')
        //事件监听
        window.addEventListener("scroll", this.toScroll)
    },
    beforeDestroy() {
        //结束移出监听
        window.removeEventListener('scroll', this.toScroll)
    },
    methods: {
        onClickLeft() {
            this.$router.push({
                path: "/",
            });
        },
        //点击导航
        toTarget(index) {
            const { content, nav } = this.element
            console.log(this.element,"nav")
            for (let n = 0; n < nav.length; n++) {
                n == index ? nav[n].classList.add('active') : nav[n].classList.remove('active')
            }
            const offset_top = content[index].offsetTop
            document.documentElement.scrollTop = offset_top - 120
        },
        //屏幕滚动
        toScroll() {
            //获取滚动距离
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            const { content, nav } = this.element
            for (let i = 0, len = content.length; i < len; i++) {
                //获取每块内容距离顶部距离
                const offset = content[i].offsetTop
                //当划过第一块内容 改变左侧导航样式
                if (scrollTop >= offset) {
                    for (let n = 0; n < len; n++) {
                        n == i ? nav[n].classList.add('active') : nav[n].classList.remove('active')
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.liveApart {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;

    .liveApart-top {
        height: 44vw;
        flex: 0 0 50px;
        position: fixed;
        top:0;
        width: 100vw;
        .nav-ul {
            background-color: #fff;
            padding: 4vw;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .active,
            .nav-List:hover {
                color: rgba(18, 122, 255, 1);
            }

            .nav-List {
                font-size: 3.73vw;
                font-family: MicrosoftYaHei;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
            }
        }
    }

    .liveApart-center {
        flex: 1;
        // overflow-y: scroll;
        // height: auto;
        margin-top:24vw;
        .content-item {
            width: 94.67vw;
            background: rgba(255, 255, 255, 1);
            padding: 3.2vw 3.2vw 3.2vw 3.2vw;
            margin-left: 3vw;
            margin-top: 2vw;

            .content-top {
                .line {
                    background-color: rgba(18, 122, 255, 1);
                    border-radius: 5px;
                    width: 0.8vw;
                    height: 3.74vw;
                }

                .info {
                    color: rgba(18, 122, 255, 1);
                    font-size: 3.73vw;
                    font-family: MicrosoftYaHei;
                    text-align: left;
                    margin-left: 1vw;
                }

            }

            table {
                width: 93vw;
                height: auto;
                margin-top: 4vw;
                margin-left: -2vw;

                tr {
                    th {
                        background-color: #E7F1FF;
                        width: 20vw;
                        padding: 2.5vw;
                        text-align: center;
                    }

                    td {
                        text-align: left;
                    }

                }
            }

            .basis-content {
                .basis-top {
                    .basis-text {
                        width: 81.6vw;
                        height: 10.14vw;
                        overflow-wrap: break-word;
                        color: rgba(10, 10, 13, 1);
                        font-size: 4vw;
                        font-weight: NaN;
                        text-align: justify;
                        line-height: 5.07vw;
                        margin-top: 3vw;
                        margin-left: 2vw;
                    }
                }

                .basis-bottom {
                    span {
                        overflow-wrap: break-word;
                        color: rgba(117, 117, 117, 1);
                        font-size: 3.2vw;
                        font-family: MicrosoftYaHei;
                        font-weight: NaN;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 3.2vw;
                        margin-top: 2vw;
                    }
                }
            }

            .text-conditions {
                width: 84vw;
                overflow-wrap: break-word;
                color: rgba(48, 49, 51, 1);
                font-size: 3.2vw;
                font-family: MicrosoftYaHei;
                font-weight: NaN;
                text-align: justify;
                line-height: 4vw;
                padding: 3vw;
            }

            .materials{
                padding:3vw;
                span{
                    overflow-wrap: break-word;
                    color: rgba(10, 10, 13, 1);
                    font-size: 4vw;
                    font-weight: NaN;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 4vw;
                    margin-left:2vw;
                }
            }



        }
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.justify-between {
    display: flex;
    justify-content: space-between;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-start {
    display: flex;
    justify-content: flex-start;
}
</style>